Array object received from service but cannot iterate through it?

Question

I have got a recipe web app, and i have a 'add recipe' page with a child component 'add ingredient' nested and called within its HTML as seen here:

<h2>Add {{addRecipeForm.controls.name.value}}</h2>
<form [formGroup]="addRecipeForm">
  ...
  <app-add-ingredient></app-add-ingredient>
  <hr>
  <button type="submit">Add new recipe</button> <button (click)="goBack()">Back</button> <button (click)="test()">check if array was caught</button>
</form>
<p>Recipe ingredient list (from service)</p>
<div *ngIf="ingredientList">
<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Quantity</th>
    <th>Units and Style</th>
  </tr>
  <tr *ngFor="let ingre of ingredientList">
    <td>{{ingre.ID}}</td>
    <td>{{ingre.name}}</td>
    <td>{{ingre.quantity}}</td>
    <td>{{ingre.unitsAndStyle}}</td>
  </tr>
</table>
</div>

I then added a button to ensure the data sent from the service was actually received in correct format etc (as seen in the screenshot I got it sends the object perfectly when the child component adds the ingredient) but when I try and present it with the table as shown I get this error:

Cannot find a differ supporting object '[object Object]' of type 'fawf'. NgFor only supports binding to Iterables such as Arrays.

I know the service isnt the problem because my 'test()' function just logs the array and its all there as seen in the screenshot.

Is there supposed to be some array showing in the console window screenshot? I see an object where name = 'fawf', and ID = 20, but no array. An array would display in square brackets, not curly ones. — R. Richards, Oct 11 '17 at 00:42

score 0 · Answer 1 · answered Oct 11 '17 at 00:36

0

https://github.com/angular/angular/issues/6392 This seems to list a similar issue and they resolved it by making a small 'hack' to overcome that error.

hack(val) {
  return Array.from(val);
}

answered Oct 11 '17 at 00:36

Sam Clark-Ash

175
1
8

score 0 · Accepted Answer · answered Oct 11 '17 at 00:52

A workaround found here Iterate over object in Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

did the trick

Array object received from service but cannot iterate through it?

2 Answers2