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.

DeborahK · Accepted Answer · 2018-11-16 01:30:57Z

2

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.

answered Nov 16, 2018 at 1:30

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anglrlearner Over a year ago

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.

Jasmonate · Accepted Answer · 2018-11-16 03:18:39Z

0

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>

answered Nov 16, 2018 at 3:18

Jasmonate

7521 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Iterate array inside object Angular 6

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related