Iterate array inside object Angular 6

Question

I'm getting an object via API with this method:

this.someService.getStuffFromAPI(this.idUser, 'Area')
  .pipe(first())
    .subscribe(
      data => {
       this.stuffOnView = data;
      },
      error => {
        console.log(error);
      }
    );

This returns an Object that have an Array, like this: In my html I have managed to get the Array length using this:

<div class="task-group" *ngFor="let key of objectKeys(stuffOnView)">
 <span class="column-title">
   {{ key.length }} Items to display
 </span>

But I can't get the properties inside the array, like idRec and so on.

How can I iterate to get the array's properties?

Thanks for your help.

score 2 · Answer 1 · answered Nov 16 '18 at 01:30

One easy way to do it is to define an interface that describes the layout of your array elements. For example, my array of products has an interface like this:

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  category: string;
  tags?: string[];
  releaseDate: string;
  price: number;
  description: string;
  starRating: number;
  imageUrl: string;
}

Angular's http get method will then automatically map the incoming API array into an array of these objects:

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl);
  }

Notice the generic parameter: <Product[]>. This is telling the http get method to return the object as an array of Product objects matching the above defined interface.

I can then use something like this:

this.products[0].productName

Or I can iterate it in my UI like this:

      <tr *ngFor="let product of products">
        <td>
          <a>{{ product.productName }}</a>
        </td>
        <td>{{ product.productCode }}</td>
        <td>{{ product.releaseDate }}</td>
        <td>{{ product.price | currency:"USD":"symbol":"1.2-2" }}</td>
      </tr>

Hope this helps.

thanks for that solution, had a similar issue, now since i have to use this at the component side, how could i dynamically use the soln provided here this.products[0].productName Since i have to display all the results irrespective of the array number. — anglrlearner, May 07 '19 at 09:20

score 0 · Answer 2 · answered Nov 16 '18 at 03:18

I suggest you define an interface, as @DeborahK has shown. Alternatively you can use Angular's keyvalue pipe. The output array will be ordered by keys, however, so if your project is order-sensitive you should not be using this. I strongly recommend against this because it relies too heavily on data structure and can break easily if your response data structure changes.

<div class="task-group" *ngFor="let object of result | keyvalue">
  <span class="column-title">
    {{ object?.value?.length }} Items to display
  </span>
  <ng-container *ngIf="object?.value?.length">
    <div class="task-item" *ngFor="let item of object.value">
      {{ item.idRec }}
    </div>
  </ng-container>
</div>

Iterate array inside object Angular 6

2 Answers2

Linked