在JavaScript/React中匹配对象数组state值并追加属性的实现

需要将第一个对象数组（ChartOptions）中的title和color键值对，当其中的两位州代码键与第二个对象数组（ChartSummary）的state值匹配时，追加到第二个数组的对应对象中。

输入示例 #

第一个对象数组（ChartOptions） #

{
  "ChartOptions": [
    {
      "title": {
        "CA": "California",
        "GA": "Georgia",
        "KY": "Kentucky",
        "MN": "Minnesota",
        "MO": "Missouri"
      },
      "color": {
        "CA": "#6A5ACD",
        "GA": "#FF0000",
        "KY": "#0000FF",
        "MN": "#FFA500",
        "MO": "#3CB371"
      }
    }
  ]
}

第二个对象数组（ChartSummary） #

{
  "ChartSummary": [
    {
      "state": "CA",
      "total": 812
    },
    {
      "state": "GA",
      "total": 240
    },
    {
      "state": "KY",
      "total": 167
    },
    {
      "state": "MN",
      "total": 578
    },
    {
      "state": "MO",
      "total": 75
    }
  ]
}

期望结果 #

{
  "ChartSummary": [
    {
      "state": "CA",
      "total": 812,
      "title": "California",
      "color": "#6A5ACD"
    },
    {
      "state": "GA",
      "total": 240,
      "title": "Georgia",
      "color": "#FF0000"
    },
    {
      "state": "KY",
      "total": 167,
      "title": "Kentucky",
      "color": "#0000FF"
    },
    {
      "state": "MN",
      "total": 578,
      "title": "Minnesota",
      "color": "#FFA500"
    },
    {
      "state": "MO",
      "total": 75,
      "title": "Missouri",
      "color": "#3CB371"
    }
  ]
}

实现方案（JavaScript） #

通过遍历ChartSummary数组，结合ChartOptions中的映射数据，为每个对象添加对应的title和color属性：

// 输入的两个数据源
const chartOptionsData = {
  "ChartOptions": [
    {
      "title": { "CA": "California", "GA": "Georgia", "KY": "Kentucky", "MN": "Minnesota", "MO": "Missouri" },
      "color": { "CA": "#6A5ACD", "GA": "#FF0000", "KY": "#0000FF", "MN": "#FFA500", "MO": "#3CB371" }
    }
  ]
};

const chartSummaryData = {
  "ChartSummary": [
    { "state": "CA", "total": 812 },
    { "state": "GA", "total": 240 },
    { "state": "KY", "total": 167 },
    { "state": "MN", "total": 578 },
    { "state": "MO", "total": 75 }
  ]
};

// 提取title和color的映射表
const { title, color } = chartOptionsData.ChartOptions[0];

// 处理数组并生成结果
const result = {
  ChartSummary: chartSummaryData.ChartSummary.map(item => ({
    ...item,
    title: title[item.state],
    color: color[item.state]
  }))
};

console.log(JSON.stringify(result, null, 2));

这段代码利用map方法遍历目标数组，通过扩展运算符保留对象原有属性，同时根据state值从映射表中取出对应字段，完成属性追加。

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