How do I merge two Javascript Objects into one?

Question

I Have two Array of Objects :

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"
      }
    ]
  }
 }
]

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]
      }
    ]
  }
 }

]

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.

What happened to the "labelName" in the second array? It seems to not exist. — incorelabs, Feb 24 '22 at 20:04
@Nazir in the first array, there is `id` on the second on and not first? — incorelabs, Feb 24 '22 at 20:26
Which variable is supposed to get the result? I see a return, but no capture of the returned values. — trincot, Feb 24 '22 at 20:27
Your input objects have a different capitalization of `datasets` and `dataSets`. There is nothing in your code that deals with that. Did you really intend to use different property names here? — trincot, Feb 24 '22 at 20:48
@incorelabs It's actually a huge object, I have just taken out the chunk that I needed to manipulate, sorry if there is some mismatch, I have tried to give as close a representation as possible. — Nazir, Feb 24 '22 at 20:52
salesBarChartData - I have tried to capture it in this variable. — Nazir, Feb 24 '22 at 20:53

score 3 · Accepted Answer · answered Feb 24 '22 at 21:06

You'll need to have a kind of deep merge. It seems that we can assume that:

the data types of data that occurs in the same place in both data structures, are guaranteed to be the same;
the arrays that occur in the same place in both data structures, are guaranteed to have the same size;
the primitive values that occur in the same place in both data structures (strings, numbers, ...) are guaranteed to be the same.

It's too bad that you want to merge properties that have different names (dataSets, datasets), so some code is needed to deal with that. But it would be better to correct this at the source.

Here is some suggested code:

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);

score 1 · Answer 2 · answered Feb 25 '22 at 05:38

Lodash if you don't mind.

The task can be divided into two steps:

Renaming the object properties. I used the easiest way, but you are free to choose.
Merging objects. I used the lodash defaultsDeep method.

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>

How do I merge two Javascript Objects into one?

2 Answers2