How to access id which is coming from API response and should be used to pass as parameter for deleteApp API

Question

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

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

Answer 1

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);
    });
  }

Answer 2

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!