Angular中提取嵌套JSON内部特定键的方法

问题原因 #

你当前代码返回undefined的直接原因是：你用键"1"去访问alphas["Data"][2]，但alphas["Data"][2]的实际有效键是"11"，键名不匹配自然取不到对应值。

解决方法 #

1. 直接访问已知键名

如果明确知道目标键是"11"，直接通过正确键名访问即可，TypeScript会自动推断类型：

// 获取"11"对应的数据
const targetData = alphas["Data"]["2"]["11"];
console.log(targetData); // 输出包含abc、abc2的对象

2. 动态提取未知键（键名不确定时）

如果alphas["Data"][2]的键是动态生成的，可通过Object.keys()提取所有键后再获取对应值：

// 获取alphas["Data"][2]的所有键数组
const dataKeys = Object.keys(alphas["Data"]["2"]);
// 提取第一个键（此处即为"11"）对应的数据
const dynamicData = alphas["Data"]["2"][dataKeys[0] as keyof typeof alphas["Data"]["2"]];
console.log(dynamicData);

3. 规范类型定义（推荐）

为了避免类型断言的麻烦，提前给数据定义TypeScript接口，让类型检查更严谨：

// 定义基础数据结构的接口
interface DetailData {
  key1: string;
  key2: string;
}

interface NestedData {
  abc: DetailData;
  abc2: DetailData;
}

interface AlphasStructure {
  Data: {
    "1": NestedData;
    "2": { [key: string]: NestedData };
    "3": NestedData;
  };
}

// 给原始数据指定类型
const alphas: AlphasStructure = {
  "Data": {
    "1": {
      "abc": { "key1":"Value1", "key2":"Value2" },
      "abc2": { "key1":"Value1", "key2":"Value2" }
    },
    "2": {
      "11": {
        "abc": { "key1":"Value1", "key2":"Value2" },
        "abc2": { "key1":"Value1", "key2":"Value2" }
      }
    },
    "3": {
      "abc": { "key1":"Value1", "key2":"Value2" },
      "abc2": { "key1":"Value1", "key2":"Value2" }
    }
  }
};

// 此时访问类型安全，无需额外断言
const safeTargetData = alphas.Data["2"]["11"];

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