CODEWITHSUNDEEP
arraysangularjavascript-objects
roymckrank
roymckrank

Reputation: 699

Iterate array inside object Angular 6

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: Array returned by API call 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.

Upvotes: 1

Views: 4378

Answers (2)

Jasmonate
Jasmonate

Reputation: 752

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>

Upvotes: 0

DeborahK
DeborahK

Reputation: 60518

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.

Upvotes: 2

Related Questions