I Have two Array of Objects :
Array 1:
"salesData": [
{
"id": "weekly",
"labelName": "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",
"labelName": "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"
}
]
}
}
]
Array 2 :
"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]
}
]
}
}
]
I need to merge these, to eventually get this array (Basically the Datasets have to be merged into one) :
Expected Result –
"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"
}
]
}
}
]
I have tried the following and other various permutations/combinations, checked out many answers on this site but none worked:
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;
});
}I am missing something, not sure what and hence am not able to get the desired result, Any Help is sincerely appreciated.