如何将API返回的嵌套JSON数据以ion-accordion形式展示？

1. 先明确API返回的嵌套JSON结构 #

假设你的API返回的嵌套数据格式类似这样（可根据实际结构调整）：

{
  "id": 1,
  "name": "张三",
  "profile": {
    "age": 28,
    "contact": {
      "phone": "138xxxxxxx",
      "email": "zhangsan@example.com"
    },
    "address": {
      "city": "北京",
      "district": "朝阳区"
    }
  }
}

2. 调整Component逻辑（可选优化） #

你当前的代码把返回数据放进了数组，若API返回单个对象，直接存储为对象更方便：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {

  userData: any; // 存储单个嵌套对象，若返回数组则改为 any[]
  constructor(private userdata: DataService) { }

  ngOnInit() {
    this.userdata.get().subscribe(data =>{
      this.userData = data;
      console.log(this.userData);
    });
  }

  // 辅助方法：判断是否为对象（用于递归处理）
  Object = Object;
  isObject(value: any): boolean {
    return typeof value === 'object' && value !== null && !Array.isArray(value);
  }

}

3. 实现ion-accordion展示 #

根据数据结构的固定性，分两种场景处理：

场景一：固定层级的嵌套结构

如果数据层级固定，直接手动编写多层ion-accordion：

<!-- view.component.html -->
<ion-accordion-group *ngIf="userData">
  <!-- 第一层：用户基本信息 -->
  <ion-accordion value="user-basic">
    <ion-item slot="header">
      <ion-label>{{ userData.name }} (ID: {{ userData.id }})</ion-label>
    </ion-item>
    <ion-list slot="content">
      <!-- 第二层：个人资料 -->
      <ion-accordion-group>
        <ion-accordion value="profile">
          <ion-item slot="header">
            <ion-label>个人资料</ion-label>
          </ion-item>
          <ion-list slot="content">
            <ion-item>年龄: {{ userData.profile.age }}</ion-item>
            <!-- 第三层：联系方式 -->
            <ion-accordion-group>
              <ion-accordion value="contact">
                <ion-item slot="header">
                  <ion-label>联系方式</ion-label>
                </ion-item>
                <ion-list slot="content">
                  <ion-item>电话: {{ userData.profile.contact.phone }}</ion-item>
                  <ion-item>邮箱: {{ userData.profile.contact.email }}</ion-item>
                </ion-list>
              </ion-accordion>
            </ion-accordion-group>
            <!-- 第三层：地址信息 -->
            <ion-accordion-group>
              <ion-accordion value="address">
                <ion-item slot="header">
                  <ion-label>地址信息</ion-label>
                </ion-item>
                <ion-list slot="content">
                  <ion-item>城市: {{ userData.profile.address.city }}</ion-item>
                  <ion-item>区域: {{ userData.profile.address.district }}</ion-item>
                </ion-list>
              </ion-accordion>
            </ion-accordion-group>
          </ion-list>
        </ion-accordion>
      </ion-accordion-group>
    </ion-list>
  </ion-accordion>
</ion-accordion-group>

场景二：动态递归嵌套（适用于未知层级的对象）

如果数据嵌套层级不固定，创建递归组件来自动解析：

1. 创建递归组件nested-accordion.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-nested-accordion',
  template: `
    <ion-accordion-group>
      <ion-accordion [value]="itemKey">
        <ion-item slot="header">
          <ion-label>{{ itemKey }}</ion-label>
        </ion-item>
        <ion-list slot="content">
          <ng-container *ngFor="let key of Object.keys(itemValue)">
            <ng-container *ngIf="isObject(itemValue[key])">
              <app-nested-accordion [itemKey]="key" [itemValue]="itemValue[key]"></app-nested-accordion>
            </ng-container>
            <ion-item *ngIf="!isObject(itemValue[key])">
              <ion-label>{{ key }}: {{ itemValue[key] }}</ion-label>
            </ion-item>
          </ng-container>
        </ion-list>
      </ion-accordion>
    </ion-accordion-group>
  `
})
export class NestedAccordionComponent {
  @Input() itemKey: string = '';
  @Input() itemValue: any;

  Object = Object;

  isObject(value: any): boolean {
    return typeof value === 'object' && value !== null && !Array.isArray(value);
  }
}

2. 在主组件HTML中使用递归组件：

<!-- view.component.html -->
<ion-accordion-group *ngIf="userData">
  <ng-container *ngFor="let key of Object.keys(userData)">
    <ng-container *ngIf="isObject(userData[key])">
      <app-nested-accordion [itemKey]="key" [itemValue]="userData[key]"></app-nested-accordion>
    </ng-container>
    <ion-accordion *ngIf="!isObject(userData[key])" [value]="key">
      <ion-item slot="header">
        <ion-label>{{ key }}</ion-label>
      </ion-item>
      <ion-list slot="content">
        <ion-item>{{ userData[key] }}</ion-item>
      </ion-list>
    </ion-accordion>
  </ng-container>
</ion-accordion-group>

4. 注意事项 #

• 确保你的模块已导入IonicModule（ion-accordion属于Ionic组件，需在app.module.ts或当前组件模块中导入）
• 用*ngIf="userData"避免数据未加载时的报错，也可添加加载提示组件
• 若API返回数组，在外层添加*ngFor="let item of userData"遍历每个对象

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