Angular display table data from object array but updating last column from another API call returns undefined value

Question

I am trying to display a table by looping an array of objects fetched from backend API.

<tr *ngFor="let obj of objarray">
           <td>{{obj.property1}}</td>
           <td>{{obj.property2}}</td>
           <td> {{**updated value of  property 2 fetched from API using value obj.property1 as query parameter** }}
</tr>

I have tried to use a function call for getting updated value at the third column, but it kept on looping as the page kept on loading.

Then, I tried to use set property to update the value in component.ts, but due to async nature of the third part API call to fetch the current status, I am getting undefined value.

A: 
looping object  obj [ i to obj.length]
obj[i].property3 = getUpdatedValuefromAPI(obj[i].property1);


B:
getUpdatedValuefromAPI(property1)
{
// fetch api call and return value- 

}

Now due to Async nature of the call, eventhough I am able to fetch updated value from API, the setproperty always sets value undefined and the third column is displayed as empty in front end.

Could someone point the error. How do I update the the last column of a multi row table dynamically from another api call?

Eliseo · Accepted Answer · 2021-07-23 06:49:16Z

I imagine you has a service name dataService with a function that return an observable

getProperty3(property1:any):Observable<any>
{
    return this.httpClient.get(' your url/'+property1)
}

When we has an array of object and we need make a call to an api to each element, we use forkJoin rxjs operator. ForkJoin convert an array of observables in an unique observable and, when subscribe, return the response in an array

So, you can has a new variable objarrayExtend:any[]

And in a ngOnInit

  ngOnInit() {
    forkJoin(
      //we create an array of observables using "map"
      //each element of the array convert in a call to this.dataService.getProperty3()

      this.objarray.map(x => this.dataService.getProperty3(x.property1))
    ).subscribe((res: any[]) => {

      //in res[0] we has the value of this.dataService.getProperty3(objArray[0].property1)
      //in res[1] we has the value of this.dataService.getProperty3(objArray[1].property1)
      ...

      //we create a new object using map, 
      //each element of this array is

      this.objarrayExtend = this.objarray.map((x: any, i: number) => ({
        ...x,  //all the property of objarray
        property3: res[i]  //and a new property "property3" with the value of res
      }));
    });
  }

then you only need iterate over objarrayExtend

A fool example (note: in the stackblitz I simulate the call to an API using of(..).pipe(delay), in a real aplication this will become a this.httpClient.get(....)

NOTE: We can think that about to have a function in your component

***NOT WORK**

getProp3(prop1:any){
    return this.dataService.getProperty3(prop1)
}

//And your .html

<tr *ngFor="let obj of objarray">
           <td>{{obj.property1}}</td>
           <td>{{obj.property2}}</td>
           <td> {{getProp3(obj.property1)|async}}</td>
</tr>

But this not work because Angular make a check several times when we has a "calculate value" in a *ngFor and the aplication crash

Collectives™ on Stack Overflow

Angular display table data from object array but updating last column from another API call returns undefined value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related