How to use *ngFor for json array to pick the value

Question

Here is my JSON data I want to print the "4th January 2018" as list header and description as the content of the list. How can I use the *ngFor this data

when i use *ngFor="let item of timeline data" I got an error

cannot find a differ supporting object '[object object]' of type 'object'. ngfor only supports binding to iterables such as arrays

Following is the data:

{
    "msg": "All Timeline Data",
    "data": {
        "4th January 2018": [
            {
                "id": 294,
                "description": "1st data",
                "taken_on": "4th January 2018",
                "status": "active",
                "created_at": "2018-01-04 06:54:06",
                "updated_at": "2018-01-04 06:54:06",
                "deleted_at": null
            },

                "id": 295,
                "description": "2nd data",
                "taken_on": "4th January 2018",
                "status": "active",
                "created_at": "2018-01-04 06:54:06",
                "updated_at": "2018-01-04 06:54:06",
                "deleted_at": null
            }
          ],
     "5th January 2018": [
            {
                "id": 296,
                "description": "3rd data",
                "taken_on": "5th January 2018",
                "status": "active",
                "created_at": "2018-01-05 06:54:06",
                "updated_at": "2018-01-05 06:54:06",
                "deleted_at": null
            }
      ]
   }
}

Possible duplicate of [Angular2 - \*ngFor / loop through json object with array](https://stackoverflow.com/questions/43215049/angular2-ngfor-loop-through-json-object-with-array) — Vivek Doshi, Feb 07 '18 at 09:16

Roberto Zvjerković · Accepted Answer · 2018-02-07T08:21:50.077

Your "data" in not an array, it's an object.

If you replace

"data": {

with

"data": [

you will be able to iterate over dates.

Also, you seem to be missing { before the second item on your '"4th January 2018":' array.

If you really need to iterate over object properties, you could do something like this.

Component:

objectKeys = Object.keys;

Template:

<div *ngFor="let key of objectKeys(timeline.data)"> {{key + ' ' + timeline.data[key]}} </div>

score 0 · Answer 2 · answered Feb 07 '18 at 08:29

0

convert your Object into array and then use it in *ngFor

here is working live demo

here is useful like
Angular 2 ngFor— Not only for Arrays

answered Feb 07 '18 at 08:29

Praveen Soni

771
8
21

score 0 · Answer 3 · answered Feb 07 '18 at 20:05

Perhaps try adding the elvis operator. ? The output below should be 294.

Also, as pointed out "data" is not an array, it is an object.

   <ion-list>
    <ion-item *ngFor="let item of timeline?.data?.4th January 2018>
        <p>{{item.id}}</p>
    </ion-item>
   </ion-list>

How to use *ngFor for json array to pick the value

3 Answers3