I have this code and I can fetch data from (number) and (name) only, how can I fetch data from elements I tried many ways, but I couldn't find a solution Please help me

JSON

[
    {
        "number": 1,
        "name": "ahmed",
        "elements": [
            {
                "id": 1,
                "text": "text1"
            },
            {
                "id": 2,
                "text": "text2"
            },
            {
                "id": 3,
                "text": "text3"
            }
        ]
    }
]

TS File

  data: any;
  constructor() {}

  ngOnInit() {
    fetch('./assets/data/datajson.json').then(res => res.json())
    .then(json => {
      this.data = json;
    });
  }

HTML

<ion-card mode="ios" *ngFor="let item of data; index as i">
    <ion-item>
      <ion-label>{{ item.name }}</ion-label>
    </ion-item>
  </ion-card>

CodePudding user response：

You should iterate over inner key. in this case elements

       <ion-card mode="ios" *ngFor="let item of data; index as i">
    <ion-item>
      <ion-label>{{ item.name }}</ion-label>
    </ion-item>
<ion-item *ngFor="let ele of item.elements">
      <ion-label>{{ ele.id}}-{{ele.text}}</ion-label>
    </ion-item>
  </ion-card>