如何在Angular/TS中遍历JSON对象数组并提取状态值？

你碰到的这个报错核心原因其实是异步操作的时序问题，我来给你拆解下：

当你调用http.get发起请求时，这是个异步操作——代码不会等着请求返回结果，而是会继续往下执行this.sortData()。这时候this.dataInfo还没被赋值（还是初始的undefined），自然会抛出"not iterable"的错误，因为你没法遍历一个未定义的值。

下面给你两种可行的解决方案，都能实现在逻辑上"外部"处理数据的需求：

方案一：在数据返回后再调用处理方法 #

把sortData()的调用放到subscribe的回调函数里，确保只有当API数据成功返回并赋值给dataInfo后，才执行遍历提取操作：

export class GeoComponent implements OnInit { 
  // 建议给dataInfo指定类型，提升代码可读性和类型检查
  dataInfo: Array<{City: string; State: string; District: string}> = []; 
  constructor(private http: HttpClient) { } 

  ngOnInit() { 
    this.http.get("https://indian-cities-api-nocbegfhqg.now.sh/cities")
      .subscribe((data) => {
        this.dataInfo = data as typeof this.dataInfo;
        this.sortData(); // 数据准备好后再调用处理方法
      }); 
  } 

  sortData() { 
    // 先做个安全校验，避免数据异常
    if (!Array.isArray(this.dataInfo)) {
      console.warn('数据格式错误，不是数组');
      return;
    }
    
    // 提取所有State值到新数组
    const allStates = this.dataInfo.map(item => item.State);
    
    // 如果需要去重，可以用Set处理
    const uniqueStates = [...new Set(allStates)];
    
    console.log('所有State:', allStates);
    console.log('去重后的State:', uniqueStates);
  } 
}

方案二：用async/await简化异步逻辑 #

如果你觉得回调写法不够直观，可以把HTTP请求转换成Promise，用async/await让代码看起来更像同步执行：

export class GeoComponent implements OnInit { 
  dataInfo: Array<{City: string; State: string; District: string}> = []; 
  constructor(private http: HttpClient) { } 

  async ngOnInit() { 
    try {
      // 把Observable转换成Promise，用await等待结果
      this.dataInfo = await this.http.get("https://indian-cities-api-nocbegfhqg.now.sh/cities")
        .toPromise() as typeof this.dataInfo;
      this.sortData(); // 数据返回后调用处理方法
    } catch (error) {
      console.error('API请求失败:', error);
    }
  } 

  sortData() { 
    if (!Array.isArray(this.dataInfo)) {
      console.warn('数据格式错误');
      return;
    }
    
    const allStates = this.dataInfo.map(item => item.State);
    const uniqueStates = [...new Set(allStates)];
    
    console.log('提取的State列表:', allStates);
    console.log('去重后的State列表:', uniqueStates);
  } 
}

补充说明 #

之前你尝试的for...of、map这些方法本身是没问题的，只是调用时机不对——在dataInfo还没被赋值为数组的时候就去调用，自然会报错。只要确保dataInfo是有效的数组后再操作，这些方法都能正常工作。

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