Ionic Angular如何获取本地JSON文件的elements嵌套数据

你当前的接口请求逻辑已经可以拿到完整的JSON数据，不需要调整fetch相关逻辑，读取不到嵌套字段的核心原因是模板只遍历了顶层数组，没有处理嵌套的elements字段。

可选TS优化（避免渲染报错） #

给data设置初始空数组，避免Angular首次渲染时因data初始值为undefined抛出循环错误，修改后代码如下：

// 初始值设为空数组
data: any[] = [];
constructor() {}

ngOnInit() {
  fetch('./assets/data/datajson.json').then(res => res.json())
  .then(json => {
    this.data = json;
    // 如果需要在TS逻辑中操作elements，直接在这里访问即可
    // 示例：打印第一条数据的所有elements内容
    console.log(this.data[0].elements);
  });
}

如果需要在TS中批量处理elements数据，直接通过数组下标+属性名访问即可，和普通JS对象操作没有区别：

this.data.forEach(topItem => {
  // topItem对应每个顶层对象，包含number、name、elements三个字段
  const elementList = topItem.elements;
  elementList.forEach(ele => {
    // ele对应elements下的每个嵌套对象，可直接取ele.id、ele.text
  })
})

模板层渲染嵌套数据 #

在原有顶层*ngFor的基础上，加第二层*ngFor遍历当前项的elements数组即可，修改后HTML代码如下：

<ion-card mode="ios" *ngFor="let item of data; index as i">
    <ion-item>
      <ion-label>名称：{{ item.name }} 编号：{{ item.number }}</ion-label>
    </ion-item>
    <!-- 第二层循环：遍历当前顶层项下的elements数组 -->
    <ion-item *ngFor="let element of item.elements" class="ion-padding-start">
      <ion-label>元素ID：{{ element.id }}，元素内容：{{ element.text }}</ion-label>
    </ion-item>
</ion-card>

渲染后就可以同时展示顶层字段和elements下的所有嵌套字段内容。

内容的提问来源于stack exchange，提问作者FTM