Angular 4(Ionic)中解析嵌套JSON并渲染Ionic列表的问题

咱们先搞定那个烦人的Cannot read property 'result' of undefined错误，再调整数据渲染的逻辑，一步一步来：

一、先解决"result未定义"的错误 #

这个错误的核心原因是HTTP请求是异步的，组件初始化时searchResults还是undefined，但模板已经开始尝试访问searchResults.result了，自然会报错。

解决方法： #

1. 初始化变量：在组件类里给searchResults一个初始值，避免它是undefined：

   export class YourComponent {
     searchResults: any = {}; // 初始化为空对象
     collegeGroups: { [key: string]: any[] } = {}; // 用来存按州分组的学院
     stateNames: string[] = []; // 州名列表
     // ...其他变量
   }
   

2. 模板里用安全导航操作符?.：在访问嵌套属性时加上?.，确保属性存在才会继续访问：

   // 替换原来的items赋值逻辑，改用处理后的州名列表
   this.stateNames = Object.keys(this.searchResults?.result || {});
   

3. 模板加*ngIf判断：在整个列表外层加判断，确保数据加载完成再渲染：

   <ion-list padding *ngIf="searchResults?.result">
     <!-- 列表内容 -->
   </ion-list>
   

二、正确解析嵌套JSON，渲染目标列表 #

你的目标是按州名作为列表头，下面显示对应学院，但原JSON是按engineering、medicine学科分组的，所以需要先把数据重新整理成"州→学院"的结构。

1. 数据整理逻辑（组件里新增方法） #

在组件里写一个处理数据的方法，把不同学科下的同州学院合并：

processCollegeData() {
  this.collegeGroups = {};
  // 先判断result是否存在，避免报错
  if (!this.searchResults?.result) return;

  // 遍历所有学科（engineering、medicine）
  Object.values(this.searchResults.result).forEach(subjectArray => {
    // 遍历每个学科下的州
    subjectArray.forEach(stateItem => {
      const stateName = stateItem.name;
      // 如果这个州还没在分组里，初始化一个空数组
      if (!this.collegeGroups[stateName]) {
        this.collegeGroups[stateName] = [];
      }
      // 把该州的学院添加到分组中
      this.collegeGroups[stateName].push(...stateItem.colleges.list);
    });
  });

  // 获取所有州名，用来循环渲染列表头
  this.stateNames = Object.keys(this.collegeGroups);
}

然后在数据请求回来后调用这个方法：

getIndianCollegeSearchData() {
  this.showLoader();
  this.apiService.getCollegeData().subscribe(
    (result: any) => {
      console.log(result);
      this.loading.dismiss();
      this.searchResults = result;
      // 处理数据
      this.processCollegeData();
    },
    (err) => {
      this.loading.dismiss();
      console.log(err);
    }
  );
}

2. 模板渲染代码 #

现在可以按目标结构渲染列表了：

<ion-list padding *ngIf="searchResults?.result">
  <!-- 循环每个州作为列表头 -->
  <ng-container *ngFor="let stateName of stateNames">
    <ion-list-header color="primary">{{stateName}}</ion-list-header>
    <!-- 循环该州下的所有学院 -->
    <ion-item *ngFor="let college of collegeGroups[stateName]">
      {{college.title}}
    </ion-item>
  </ng-container>
</ion-list>

三、优化API服务代码（改用HttpClient） #

Angular4+推荐用HttpClient（自动解析JSON），可以简化你的API服务代码，避免Promise嵌套：

// 先在你的模块（比如AppModule）里导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

// API服务里的代码：
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class ApiService {
  constructor(private http: HttpClient, private authService: AuthService) {}

  getCollegeData() {
    // 设置请求头
    const headers = new HttpHeaders().set('Authorization', this.authService.token);
    // 返回Observable，组件里直接subscribe即可
    return this.http.get('http://13.126.17.194/colleges.php', { headers });
  }
}

这样调整后，既解决了异步加载的报错问题，又能正确渲染出按州分组的学院列表啦~

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