Angular NgFor only supports binding to Iterables such as Arrays

Question

I am getting an error while trying to loop through and display data using ngFor.

Actual error in console "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

Here is my code:

//TS Component

var lssessionsObject = JSON.parse(localStorage.getItem('sessionsObject'));

//localstorage array

lssessionObject = {"total_rows":1,"offset":0,"rows":[{"id":"245fd1cbf38f79256a7443a0b5001461","key":"245fd1cbf38f79256a7443a0b5001461","value":{"cinemaid":"0001","session":"168970","filmid":"HO00003858","screen":"VIP 1","datetime":"2017-07-22T11:00:00","attributes":["3D Film","Scene VIP"]}}]}

HTML

<ion-slides class="image-slider" slidesPerView="3" pager="true">
        <ion-slide *ngFor="let item of sessionsObject" class="border">
        <button ion-item color="primary" id={{item.filmid}} class="bottom-slider">
            {{item.filmid}}
        </button>

    </ion-slide>
</ion-slides>

Please assist me

As the message clearly states: You need to pass an array to your ngFor not an object. — eko, Jul 26 '17 at 08:16
https://stackoverflow.com/questions/41396435/how-to-iterate-object-object-using-ngfor-in-angular-2/41396558#41396558 — Günter Zöchbauer, Jul 26 '17 at 08:18
@echonax, you need to pass an iterable, it can be anything with the iterable interface, see my answer below — Max Koretskyi, Jul 26 '17 at 08:39
hey, so did [my answer](https://stackoverflow.com/a/45321622/2545680) help? — Max Koretskyi, Jul 26 '17 at 12:23
Sorry for the late response, timezone issues, I tried your suggestion but had no luck. I am not sure if it is an Ionic 3 problem. — skydev, Jul 27 '17 at 05:25
I then proceeded to looping through the object and converting to an array, but I'm quite stuck on this. — skydev, Jul 27 '17 at 05:56

Max Koretskyi · Answer 1 · 2017-07-26T08:41:45.487

ngFor works with iterables. An iterable object is the object that implements [Symbol.iterator] method that returns an iterator. You can read more about it here. Only Array and Map are iterable in JS by default.

Objects in JavaScript are not iterable. And your sessionsObject is simple object and it therefore doesn't implement [Symbol.iterator] method. But you can easily implement it yourself:

// 
lssessionsObject[Symbol.iterator] = function* () {
   for (p in this) yield this[p];
}

Angular NgFor only supports binding to Iterables such as Arrays

1 Answers1

Linked