如何在Angular中解析指定JSON并转换为数组？

1. 定义正确的TypeScript接口 #

根据你提供的JSON结构，需要定义两个匹配的接口：一个描述数组中单个元素的结构，另一个描述整个响应的顶层结构：

// 单个测试项的接口
interface TestItem {
  name: string;
  st: 'ok' | 'ko'; // 用字面量类型限定取值范围，提升类型严谨性
}

// 整个响应的接口
interface TestResponse {
  results: TestItem[];
}

2. 调整服务的请求方法返回类型 #

把getTest方法的返回类型从Observable<Object>改为Observable<TestResponse>，让Angular HttpClient自动完成类型映射，同时获得完整的类型提示：

// 你的服务类示例
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TestService {
  constructor(private http: HttpClient) {}

  getTest(): Observable<TestResponse> {
    // 替换为你的实际API地址
    return this.http.get<TestResponse>('/api/test-data');
  }
}

3. 修正订阅逻辑的错误 #

你之前的代码存在两个核心问题：

• 错误地将整个响应对象直接转为数组（实际响应是包含results数组的顶层对象）
• 遍历方法拼写错误：foreach应为forEach（首字母大写）

修正后的订阅代码：

this.service.getTest().subscribe({
  next: (response) => {
    console.log(response);
    // 正确提取results数组
    const responseList = response.results;
    // 遍历数组并处理数据
    responseList.forEach((item) => {
      this.globVar.push({
        // 根据你的需求展开属性，示例如下：
        itemName: item.name,
        itemStatus: item.st
      });
    });
  },
  error: (msg) => {
    console.log(msg);
  }
});

额外说明 #

如果不想提前定义TestResponse接口，也可以在订阅时直接做类型断言（但不推荐，会丢失类型安全校验）：

this.service.getTest().subscribe({
  next: (response: { results: TestItem[] }) => {
    const responseList = response.results;
    // ...后续逻辑
  }
});

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