Angular TypeScript项目获取JSON数组嵌套元素返回undefined问题

Angular 中 HttpClient.get() 方法返回的是冷 Observable 对象，而非直接的 JSON 数组。你没有订阅该 Observable 时，请求不会触发，也拿不到真实的返回数据，直接对 Observable 调用数组的 forEach 方法自然会返回 undefined，和你直接在静态数组上测试的逻辑完全不同。

首先建议先定义对应的 TypeScript 类型，提升代码可维护性：

interface ServiceItem {
  id: number;
  name: string;
}

interface CategoryItem {
  id: number;
  name: string;
  services: ServiceItem[];
}

基础订阅写法（手动管理订阅） #

// 页面绑定用的变量
public targetServices: ServiceItem[] = [];

// 传入ID获取对应分类的services数组
loadTargetServices(targetId: number) {
  this.http.get<CategoryItem[]>('/assets/products.json').subscribe({
    next: (categoryList) => {
      // 拿到返回的数组后再做匹配
      const matchCategory = categoryList.find(item => item.id === targetId);
      if (matchCategory) {
        this.targetServices = matchCategory.services;
        console.log(this.targetServices);
      }
    },
    error: (err) => console.error('JSON资源加载失败：', err)
  })
}

响应式异步管道写法（推荐，无需手动管理订阅） #

组件代码：

import { map } from 'rxjs';

// 直接定义Observable对象，在模板中用async管道自动订阅
public targetServices$ = (targetId: number) => this.http.get<CategoryItem[]>('/assets/products.json').pipe(
  map(list => list.find(item => item.id === targetId)?.services || [])
);

模板绑定代码：

<!-- 示例遍历展示services数组，自动处理异步状态 -->
<div *ngFor="let service of targetServices$(1) | async">
  服务ID：{{service.id}}，服务名称：{{service.name}}
</div>

• 不要直接对HttpClient.get()的返回值做数组操作，必须先订阅拿到响应体之后再处理数据
• 匹配ID时建议用严格等于===代替==，避免类型转换带来的隐藏bug
• 如果需要处理异步加载的状态，可以额外定义loading变量在订阅前后切换，优化页面体验

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