如何将两个Javascript对象合并为一个

Question

我有两个对象数组：

salesLabelData-

"salesData": [
{
"id": "weekly",
"chartData": {
"dataSets": [
{
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
},
{
"id": "monthly",
"chartData": {
"dataSets": [
{
"id": "target-qty",
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
}
]

salesAPI数据:

"salesData": [
{
"id": "weekly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
}
]
}
},
{
"id": "monthly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
}
]
}
}

]

我需要合并这些，最终得到这个数组(基本上数据集必须合并为一个(：

预期结果-

"salesData": [
{
"id": "weekly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [
450,
480,
379,
325,
425,
287,
274,
499,
333,
401,
123,
444
],
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [
450,
480,
379,
325,
425,
287,
274,
499,
333,
401,
123,
444
],
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [
450,
480,
470,
420,
425,
436,
401,
411,
422,
433,
499,
444
],
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
},
{
"id": "monthly",
"labelName": "TARGET",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
}
]

我尝试了以下和其他各种排列/组合，在这个网站上查看了许多答案，但都不起作用：

if (salesLabelData?.salesData && salesAPIData?.salesData) {
const array1 = salesLabelData.salesData;
const array2 = salesAPIData.salesData;
array1?.map((data, index) => {
if (data.id === array2[index].id) {
const labelData = {
...data,
...array2[index],
};
salesBarChartData.push(labelData);
}
return salesBarChartData;
});
}

我错过了一些东西，不确定是什么，因此无法获得预期的结果，我们真诚地感谢您的帮助。

Answer 1

您需要进行一种深度合并。似乎我们可以假设：

• 在两个数据结构中出现在同一位置的数据的数据类型保证是相同的
• 在两个数据结构中出现在相同位置的数组保证具有相同的大小
• 在两个数据结构(字符串、数字…(中出现在同一位置的基元值保证是相同的

想要合并具有不同名称(dataSets、datasets(的属性太糟糕了，因此需要一些代码来处理这一问题。但最好从源头上纠正这一点。

这里有一些建议的代码：

function deepMerge(a, b) {
if (Object(a) !== a) return b;
if (Object(b) !== b) return a;
if (Array.isArray(a)) return a.map((obj, i) => deepMerge(obj, b[i]));
if (a.hasOwnProperty("dataSets")) { // "fix"
let dataSets;
({ dataSets, ...a } = { ...a, datasets: dataSets });
}
return Object.fromEntries(Array.from(
new Set(Object.keys(a).concat(Object.keys(b))), 
key => [key, deepMerge(a[key], b[key])]
));
}
var salesLabelData = {"salesData": [{"id": "weekly","chartData": {"dataSets": [{"borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}},{"id": "monthly","chartData": {"dataSets": [{"id": "target-qty","borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "net-sales","borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "gap","borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}}]};
var salesAPIData = {"salesData": [{"id": "weekly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}},{"id": "monthly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}}]}
let result = deepMerge(salesLabelData, salesAPIData);
console.log(result);

Answer 2

Lodash如果您不介意的话。

任务可分为两个步骤：

• 重命名对象属性。我用了最简单的方法，但你可以自由选择
• 正在合并对象。我使用了lodash defaultsDeep方法

const salesLabelData = {"salesData": [{"id": "weekly","chartData": {"dataSets": [{"borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}},{"id": "monthly","chartData": {"dataSets": [{"id": "target-qty","borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "net-sales","borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "gap","borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}}]};
const salesAPIData = {"salesData": [{"id": "weekly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}},{"id": "monthly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}}]}

const renameProperties = (obj) => 
JSON.parse(JSON.stringify(obj).replaceAll('"dataSets":','"datasets":'));
const result = _.defaultsDeep(renameProperties(salesLabelData), salesAPIData);

console.log(result);

.as-console-wrapper{min-height: 100%!important; top: 0}

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>