Angular获取JSON接口指定字段报错排查及正确实现方法

你遇到的Cannot read properties of undefined (reading 'port_count')错误，是响应数据的访问路径写错导致的：

1. 接口返回的根结构是对象，目标数组存放在根对象的data属性下，你直接写data[0]相当于试图从根对象上取索引为0的属性，拿到的是undefined，再读取port_count属性自然会抛出异常
2. 额外的小问题：你提前把响应对象转成JSON字符串赋值给this.response，后续拼接打印时会把字符串和数值混在一起，排查问题时可读性很差。

Angular的HttpClient默认会自动把接口返回的JSON内容解析成JS对象，不需要手动做JSON转换，按实际结构取字段即可，参考实现：

// 建议给post加泛型约束响应结构，TS会自动提示字段，减少路径写错的概率
this.http.post<{
  data: Array<{
    key: string,
    total_count: number,
    traffic: number,
    traf_count: number,
    port: number,
    port_count: number
  }>
}>(this.url + "/DeptWiseCount", {
  startDate: this.newStartDate,
  endDate: this.newEndDate
}).subscribe({
  next: (res) => {
    // 直接存解析后的响应对象，不需要提前转字符串，需要序列化展示的时候再转
    this.response = res;
    // 目标数组在res.data路径下，遍历打印所有项的port_count
    res.data.forEach((item, idx) => {
      console.log(`第${idx + 1}条数据的port_count：`, item.port_count);
    });
    // 如果只需要第一条的port_count，直接取res.data[0].port_count即可
    // 稳妥起见可以加可选链判空：console.log(res?.data?.[0]?.port_count)
  },
  error: (err) => {
    this.handleError(err);
  }
})

• 不建议在拿到响应的第一时间就做JSON.stringify，浏览器控制台直接打印JS对象可以自由展开查看嵌套结构，比字符串方便排查问题
• 取嵌套属性时建议用可选链?.做判空，避免接口偶发返回空结构、字段缺失时再次出现读取undefined属性的错误
• subscribe时推荐写next/error的对象形式，比逗号表达式的写法可读性更高，后续加complete回调也更方便

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