Ionic2 Ngfor only supports array

Question

im try to load some json via http client, but when it comes to the view i always get this error:

NgFor only supports binding to Iterables such as Arrays

When i look at the console.log output i see that it is an object with other objects in it.

Thats my service code:

@Injectable()
export class DataService {
  data: any;

  constructor(private http: Http) {
    this.data = null;
  }

  load() {

      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
    return this.http.get('http://localhost:3000/db') //json url
      .map(res => res);
  }
}

Then my page.ts constructor where the data is loaded :

constructor(private nav:NavController, navParams:NavParams, http:Http, public service:DataService) {
        this.service.load().subscribe (
            response => {
                this.displayData=response;
                console.log(this.displayData);
            },
            error => console.log ('error in download')
        );
}

My page.html ngfor:

<ion-card *ngFor="let data of displayData">
</ion-card>

And finally my json from the localhost url:

{
  "0": {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  "1": {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
}

Hope somebody knows whats wrong cause this drives me crazy.

This doesn't look like an array. How are you building it on your server side? — Maximilian Riegler, Jul 12 '16 at 09:40
Your Json should be `[{"title" : ...}, {"title": ...}]` because right now, it's not an `array` but an `object` with two `properties` called *0* and *1* — sebaferreras, Jul 12 '16 at 09:46
your json doesn't have to be a certain way because you cannot always control how the API delivers it all you have to do is convert it to an array... http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object — Aaron Saunders, Jul 12 '16 at 12:32

sebaferreras · Accepted Answer · 2017-09-30T06:47:11.640

Your Json should be [{"title" : ...}, {"title": ...}] because right now, it's not an array but an object with two properties called 0 and 1. Have you tried with changing the Json like this:

[
  {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
]

And now in your view:

<ion-card *ngFor="let data of displayData">

    <ion-card-header>{{data.title}}</ion-card-header>   

    <ion-card-content >
        <p *ngFor="let item of data.items">{{item.name}} : {{item.value}}</p>
    </ion-card-content>

</ion-card>

Thanks very much, this was my problem. This whole new angular,ionic, json thing is new to me... — Zero, Jul 12 '16 at 09:54
Glad to be helpful. Those are pretty exciting technologies, so have fun with them :) — sebaferreras, Jul 12 '16 at 10:06

Ionic2 Ngfor only supports array

1 Answers1