ngFor iterating through inside array object array using angular 7

Question

I have this JSON

[

        {
            Id: "14",
            Title: "HR Europe",
            Description: "HR Europe",
            Color: "3B23FF",
            Contents: [
                {
                    Id: "15",
                    Title: "W.I.D.E Experience",
                    Description: "Discover our Value!",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                  },
                {
                    Id: "17",
                    Title: Experience",
                    Description: "Discover our Value!",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                }
            ]
        },
        {
            Id: "12",
            Title: "Company",
            Description: "Company",
            Color: "4FFF26",
            Contents: [
                {
                    Id: "13",
                    Title: "CEO &amp; Presidents Environmental Message",
                    Description: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                    Date: new Date('2020-02-13'),
                    Type: "content",
                }
            ]
        },
        {
            Id: "8",
            Title: "Engine",
            Description: "Engine",
            Color: "FF4F0C",
            Contents: [
                {
                    Id: "10",
                    Title: "Pre Bunker Training",
                    Description: "yyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
                    Date: new Date('2019-12-02'),
                    Type: "content",
                   },
                {
                    Id: "11",
                    Title: "Exhaust Gas Cleaning System pH-Sensor cleaning",
                    Description: "uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu",
                    Date: new Date('2019-12-02'),
                    Type: "content",

                }
            ]

I want to show this title Title: "CEO & Presidents Environmental Message" {{item?.Contents.Title}} but I used not correct and show

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

Can you share with me any idea how to use *ngFor in this part?

Contents property is an array. Either access specific elements directly {{item?.Contents[0].Title}} or use a nested *ngFor. — Michael D
Can you add further code related to this? how are you using the JSON file? are you parsing it as an object before using it in the html? Maybe add the component code too (.html and .ts). — n_denny

n_denny n_denny · Accepted Answer · 2021-04-21T11:04:45

I've created an example of what you're asking, basically it uses two *ngFor to go through the data.

You need a first ngFor to iterate the array of items you provided.

Then a second ngFor to iterate the array of Contents for each item iterated above.

<div *ngFor="let item of items">
  <div *ngFor="let content of item.Contents">
    {{content.Title}}
  </div>
</div>

This is the stackblitz example i've made that shows both iterations.

I advice you to check Angular documentation about structural directives (ngIf,ngFor,...).

ngFor iterating through inside array object array using angular 7

1 Answers