Home > Software design >  How to access id which is coming from API response and should be used to pass as parameter for delet
How to access id which is coming from API response and should be used to pass as parameter for delet

Time:03-24

Ts file

export class AppInfoComponent implements OnInit {   
data: [] = [];  
constructor(private getCmsService: GetCmsService, private router: Router, private deleteAppService: DeleteAppService) { }   
ngOnInit(): void {     
this.getcmsApps();   
}   
getcmsApps() {     
this.getCmsService.getApps().subscribe((res: any) => {       
this.data = res;       
console.log(res)       
console.log("res" this.data)     
})   
} 
deleteApp(){         
this.deleteAppService.deleteAppById(this.data).subscribe((res: any) => {       
console.log(res)    
}) 
}

Here in the getcmsApps() function first console statement is returing api response but when second console statement returns like this

res[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I need to pass app id inside deleteAppById(APPID) inside deleteApp() function.

Service.Ts file

@Injectable({   providedIn: 'root' }) 
export class GetCmsService {   
constructor(private httpclient: HttpClient) { }   
getApps() {     
return this.httpclient.get(environment.url  environment.cmsApp, {headers: {'Ocp-Apim-Subscription-Key':environment.OcpSubscriptionKey}
})   
}   
deleteAppById(appId: string) {     
return this.httpclient.delete(environment.url  environment.cmsApp appId, {headers: {'Ocp-Apim-Subscription-Key':environment.OcpSubscriptionKey}
})   
} 
}

This is the response enter image description here

So here i need to get respective App id to pass inside deleteAppById(appId: string) {} function for deleting apps.

CodePudding user response:

Looks like deleteAppId() can only accept one id at a time. So lets take id of an object from array of this.data and pass it along.

  getcmsApps() {
    this.getCmsService.getApps().subscribe((res: any) => {
      this.data = res;
      console.log(res);
      console.log('res'   this.data);
      for (let item of this.data) {
        if (item?.id) {
          this.deleteApp(item.id);
        }
      }
    });
  }

  deleteApp(id: string) {
    this.deleteAppService.deleteAppById(id).subscribe((res: any) => {
      console.log(res);
    });
  }

CodePudding user response:

To print out your data in the console directly change this line console.log("res" this.data) to console.log("res", this.data) - that will print your data correctly.

Secondly, this is not clear from your question, but you are probably rendering the "data" in some kind of list or table right, using *ngFor perhaps? right?

Then, with presumption that you use app as the *ngFor local variable, on each rendered app item you should place a (click) handler, something like this:

<ul>
 <li *ngFor="let app of data" (click)="deleteAppById(app.id)">{{app.name}}</li>
</ul>

In .ts, define a function for delete like this:

deleteAppById(appId: string): void {
    this.deleteAppService.deleteAppById(appId)
       .subscribe((res: any) => {       
        console.log(res);
        //remove the deleted app item from the "data" array, or 
        //simply re-fetch it
}

That way, when you click on the app name, your delete function will be invoked. But the item will stay on screen if you don't re-fetch the "data" array afterwards, or simply remove the app from your array.

I hope that this helps!

  • Related