如何根据Label合并两次API调用返回的两类数据？

我们通过两次API调用拿到两类数据：
第一类是对象数组：

[
  { label: "Private", price: 5 },
  { label: "VIP", price: 5 },
];

第二类是字典结构的对象：

{
    "Private": {
        "count": 34
    },
    "VIP": {
        "count": 80
    }
}

需要依据label字段把这两类数据合并，最终得到如下结果：

[
  { label: "Private", price: 5, count: 34 },
  { label: "VIP", price: 5, count: 80 },
]

解决方案（JavaScript） #

用数组的map方法就能轻松实现，结合扩展运算符保留原属性，再从字典里取对应label的count值：

// 定义两类数据
const apiArr = [
  { label: "Private", price: 5 },
  { label: "VIP", price: 5 },
];

const apiDict = {
    "Private": {
        "count": 34
    },
    "VIP": {
        "count": 80
    }
};

// 合并数据
const mergedData = apiArr.map(item => ({
  ...item,
  count: apiDict[item.label].count
}));

console.log(mergedData);

额外处理：兼容label不存在的情况 #

如果担心数组里的label在字典中找不到导致报错，可以加可选链和默认值做兼容：

const mergedData = apiArr.map(item => ({
  ...item,
  count: apiDict[item.label]?.count || 0 // 找不到时count设为0，也可换成null
}));

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