Angular中使用Object.keys同时获取JSON键与对应值的实现方案

我明白你的需求——现在你只能拿到name的值，但想要同时获取像carTwo、rocket2这样的键，以及它们对应的name值（比如Tesla X、Falcon 9）。咱们一步步来解决这个问题：

首先修正接口定义 #

你的原接口IBrand没有匹配JSON的实际结构，咱们需要调整一下，让类型更准确：

// 单个品牌/火箭项的接口（对应数组里的对象）
export interface IBrandItem {
  id: string;
  name: string;
}

// 外层数据结构：包含cars和rockets两个对象，每个对象的键是字符串，值是IBrandItem数组
export interface IData {
  cars: Record<string, IBrandItem[]>;
  rockets: Record<string, IBrandItem[]>;
}

然后修改你的TypeScript代码 #

原代码的问题在于，你只遍历了外层的cars和rockets键，但没深入遍历它们内部的carOne、carTwo这类键。咱们用Object.entries()来获取键值对，就能同时拿到键和对应的数据了：

get() {
  this.service.getAll().subscribe((data: IData) => {
    // 先遍历外层的cars和rockets两个分类
    Object.values(data).forEach(category => {
      // 遍历每个分类下的键值对（比如carTwo: [...]）
      Object.entries(category).forEach(([itemKey, itemsArray]) => {
        // 只处理非空的数组，避免空数组报错
        if (itemsArray.length > 0) {
          const targetName = itemsArray[0].name;
          // 把键和name存入数组，你可以根据需求选择存储格式
          // 比如存成对象：
          this.array.push({ key: itemKey, name: targetName });
          // 或者存成字符串：
          // this.array.push(`${itemKey}: ${targetName}`);
        }
      });
    });
  });
}

代码说明 #

• Object.values(data)：获取cars和rockets这两个对象，遍历每个分类；
• Object.entries(category)：把每个分类（比如cars对象）转换成键值对数组，每个元素是[键名, 对应数组]，这样就能拿到carTwo、rocket2这类键；
• 检查数组长度：避免处理空数组（比如carOne、rocket1），只提取有数据项的name；
• 最后把键和name组合成你需要的格式存入this.array。

这样修改后，你就能同时获取到目标键和对应的name值啦！

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