Angular中如何从JSON数据中获取指定key对应内容

你可以根据当前拿到的数据格式，选择对应方式提取目标内容：

• 已解析为对象的场景
  如果数据已经是JavaScript/TypeScript对象（比如Angular HttpClient默认返回的解析后结果、已经手动做过JSON转换的变量），直接通过属性访问符取值即可。
  示例代码：

// 目标数据结构
const sourceData = {
  "employee": {"name":"John","age":12}
};
// 提取employee对应内容
const employeeData = sourceData.employee;
// 输出结果为 {name: "John", age: 12}

• 原始JSON字符串场景
  如果拿到的是未解析的JSON字符串，需要先通过JSON.parse()转成对象后再取值，建议加异常捕获避免格式错误导致代码报错：

const jsonString = '{"employee":{"name":"John","age":12}}';
try {
  const parsedData = JSON.parse(jsonString);
  const employeeData = parsedData.employee;
  // 后续可直接调用employeeData.name、employeeData.age等属性
} catch (err) {
  console.error('JSON解析异常：', err);
}

Angular实际业务场景参考 #

在Angular项目中通过HttpClient调用接口时，框架默认会把接口返回的JSON字符串解析为对象，你可以直接在订阅回调里取值，配合TypeScript类型定义还能获得类型提示，减少拼写错误：

// 先定义对应数据类型
interface Employee {
  name: string;
  age: number;
}
interface ApiRes {
  employee: Employee;
}

// 接口请求示例
this.http.get<ApiRes>('/your/data/api').subscribe(res => {
  // 直接获取employee字段内容，自带类型校验
  const employeeInfo = res.employee;
});

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