Angular接口返回的对象数组中无法正常访问id字段

核心问题根因 #

当前代码无法正常提取目标id字段的原因有两点：

1. Angular HttpClient会自动将JSON格式的接口响应解析为原生JS对象，你在回调中使用JSON.stringify把解析后的对象转成了字符串，字符串无法通过点语法访问内部嵌套属性
2. 未匹配接口实际的响应层级：目标对象数组并非挂载在响应根节点，而是嵌套在响应对象的data字段内部，数组的每个元素才包含需要提取的id字段

可直接复用的实现代码 #

首先定义与接口返回结构匹配的类型声明，替代原有的any类型，避免隐式类型错误：

// 匹配数组内单条药品数据的结构
interface MedicineItem {
  id: number;
  // 可根据实际返回补充其他字段的类型定义
}
// 匹配接口整体返回的结构
interface ApiResponse {
  status: string;
  message: string;
  data: MedicineItem[];
}

调整请求逻辑与回调处理：

this.http.get<ApiResponse>('https://master.smartmedisys.gr:86/api/v1/medicines/barcode/2800449503104', { headers })
  .subscribe({
    next: (responseData) => {
      // 定位嵌套在data字段中的目标对象数组
      const medicineArray = responseData.data;
      // 批量提取数组内所有元素的id字段
      const allIdList = medicineArray.map(item => item.id);
      // 提取数组第一个元素的id，通过可选链规避空值访问报错
      const firstItemId = medicineArray[0]?.id;
      // 直接将解析后的响应对象赋值给组件变量用于页面渲染
      this.response = responseData;
      console.log('提取到的id列表：', allIdList);
    }
  })

注意事项 #

• 移除原逻辑中的this.response = JSON.stringify(data)代码：除非需要把响应数据持久化到本地存储，否则不需要手动序列化响应数据，保留原生解析后的对象结构才能正常访问内部嵌套字段
• 注意字段访问路径的正确性：完整的id访问路径为responseData.data[索引].id，跳过data层级直接从响应根节点取id会返回undefined
• 增加空值防护：如果接口可能返回空数组，可先判断数组长度再执行映射提取逻辑，避免触发空指针报错

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