如何将API返回的JavaScript数组映射为指定结构的新对象？

原始API数据结构 #

const searchFilters = [
    {
      "filter": "Make",
      "values": [
        {
          "id": 1,
          "name": "Chevy",
        },
        {
          "id": 2,
          "name": "Ford",
        },
        {
          "id": 3,
          "name": "Honda",
        }
      ]
    },
    {
      "filter": "Color",
      "values": [
        {
          "id": 1,
          "name": "Black",
        },
        {
          "id": 2,
          "name": "White",
        },
        {
          "id": 3,
          "name": "Red",
        }
      ]
    },
];

目标数据结构 #

const make = [
    {
      "id": 1,
      "label": "Chevy",
    },
    {
      "id": 2,
      "label": "Ford",
    },
    {
      "id": 3,
      "label": "Honda",
    }
];

原代码问题 #

你当前的代码用filter后再嵌套map，会得到一个二维数组（比如[[{...}, {...}]]），而不是目标的一维数组。另外filter会返回所有匹配项，这里我们只需要第一个"Make"对应的过滤器对象，用find更高效。

修正后的代码 #

const searchFilters = [ { "filter": "Make", "values": [ { "id": 1, "name": "Chevy", }, { "id": 2, "name": "Ford", }, { "id": 3, "name": "Honda", } ] }, { "filter": "Color", "values": [ { "id": 1, "name": "Black", }, { "id": 2, "name": "White", }, { "id": 3, "name": "Red", } ] }, ];

const make = searchFilters
  ?.find(f => f.filter === "Make")
  ?.values.map(value => ({
    id: value.id,
    label: value.name
  })) || [];

console.log(make);

关键改动说明 #

1. 用find替代filter：find直接返回第一个匹配"Make"的对象，而非数组，避免后续嵌套处理。
2. 可选链与兜底处理：?.防止searchFilters为空或找不到匹配项时抛出错误；|| []确保找不到数据时返回空数组，保持结构一致。
3. 简化对象返回：箭头函数直接返回对象时用括号包裹，省略冗余的return语句。

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