Merge 2 arrays of objects but concat arrays if properties has the same value

Question

I have two objects with the next structure:

let sourceObj = [
                    {
                        items: [
                            { items: [{ id: '0', name: 'z' }], name: 'm' },
                            { items: [{ id: '2', name: 'q' }], name: 'l' },
                        ],
                        name: 'c'
                    },
                    {
                        items: [
                            { items: [{ id: '4', name: '-' }], name: 'v' },
                        ],
                        name: 'd'
                    }
                ];

let targetObj = [
                    {
                        items: [
                            { items: [{ id: '1', name: 'd' }], name: 'm' },
                            { items: [{ id: '3', name: 'b' }], name: 'j' },
                        ],
                        name: 'c'
                    }
                ];

I want to merge this object to get one object with the next structure:

let merged =    [
                    {
                        items: [
                            { items: [
                                { id: '0', name: 'd' }, 
                                { id: '1', name: 'z' }], 
                              name: 'm' 
                            },
                            { items: [{ id: '2', name: 'q' }], name: 'l' },
                            { items: [{ id: '3', name: 'b' }], name: 'j' },
                        ],
                        name: 'c'
                    },
                    {
                        items: [
                            { items: [{ id: '4', name: '-' }], name: 'v' },
                        ],
                        name: 'd'
                    }
                ]

That is I want to get the object, which has joined arrays if the name of the source array is the same in the target array.

I tried use lodash method mergeWith, but I could join only upper items level of collections...

mergeWith(sourceObj, targetObj, (objValue, srcValue) => {
          if (isArray(objValue)) {
            return objValue.concat(srcValue);
          }
        });

What if targetObject = [{ id: "9", name: "c"}]? What would be the expected output? — trincot
– trincot, Commented Sep 16, 2021 at 15:56
It's impossible. The topmost level is [{ items: [{ id: "9", name: "c"}], name: "-"}] — Yumie
– Yumie, Commented Sep 16, 2021 at 16:13

Drew Reese · Accepted Answer · 2021-09-16 20:14:16Z

You are correct in that Lodash's mergeWith doesn't merge recursively. You can manage this yourself manually.

First iterate the first array and generate a map object by the name property.
Then iterate the second array and check if the name property matches, and if so, recursively call the merge function to merge the two nested arrays from source and target arrays, otherwise, add the second array's element to the object map.
Finally, convert the map object back to an array of the merged values.

Code:

const merge = (sourceArr, targetArr) => {
  // (1) generate lookup map
  const objMap = sourceArr.reduce((map, curr) => {
    return {
      ...map,
      [curr.name]: curr
    };
  }, {});

  // (2) Merge objects, recurse on items arrays
  targetArr.forEach((obj) => {
    if (objMap[obj.name]) {
      objMap[obj.name].items = merge(objMap[obj.name].items, obj.items);
    } else {
      objMap[obj.name] = obj;
    }
  });

  // (3) Return merged values array
  return Object.values(objMap);
};

const sourceObj = [
  {
    items: [
      { items: [{ id: "0", name: "z" }], name: "m" },
      { items: [{ id: "2", name: "q" }], name: "l" }
    ],
    name: "c"
  },
  {
    items: [{ items: [{ id: "4", name: "-" }], name: "v" }],
    name: "d"
  }
];

const targetObj = [
  {
    items: [
      { items: [{ id: "1", name: "d" }], name: "m" },
      { items: [{ id: "3", name: "b" }], name: "j" }
    ],
    name: "c"
  }
];

const merge = (sourceArr, targetArr) => {
  const objMap = sourceArr.reduce((map, curr) => {
    return {
      ...map,
      [curr.name]: curr
    };
  }, {});

  targetArr.forEach((obj) => {
    if (objMap[obj.name]) {
      objMap[obj.name].items = merge(objMap[obj.name].items, obj.items);
    } else {
      objMap[obj.name] = obj;
    }
  });

  return Object.values(objMap);
};

const res = merge(sourceObj, targetObj);

console.log(res);

Scott Sauyet · Accepted Answer · 2021-09-17 13:13:12Z

I find a dose of mutual recursion makes for cleaner code here.

const combineItems = (o = {}, items) =>
  o .items || items .length ? {items: deepMerge (o.items || [], items)} : {} 

const deepMerge = (xs, ys) => 
  Object .values ([... xs, ... ys] .reduce (
    (a, {name, items = [], ...rest}) => ({
      ... a,
      [name]: {
        ... (a [name] || {name, ...rest}),
        ... combineItems (a [name], items)
      }
    }), {}
  ))

const sourceObj = [{items: [{items: [{id: "0", name: "z"}], name: "m"}, {items: [{id: "2", name: "q"}], name: "l"}], name: "c"}, {items: [{items: [{id: "4", name: "-"}], name: "v"}], name: "d"}]
const targetObj = [{items: [{items: [{id: "1", name: "d"}], name: "m"}, {items: [{id: "3", name: "b"}], name: "j"}], name: "c"}];

console .log (deepMerge (sourceObj, targetObj))

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

deepMerge is the main function, but it delegates to combineItems to handle the various combinations of whether we already have items to combine or not. combineItems will return something like {items: [<item1>. <item2>, ...]} or just {}, depending upon whether any items have been found.

There is a potential performance problem here, which Rich Snapp has dubbed the The reduce ({...spread}) anti-pattern. I personally would not worry about it here if the code is performing to your satisfaction. But if not, we can change it to match his suggestions, to something like this:

const deepMerge = (xs, ys) => 
  Object .values ([... xs, ... ys] .reduce (
    (a, {name, items = [], ...rest}) => {
      const x = a [name] || {name, ...rest}
      if (items.length || x.items)
      x .items = deepMerge (x .items || [], items)
      a [name] = x
      return a
    }, {}
  ))

Collectives™ on Stack Overflow

Merge 2 arrays of objects but concat arrays if properties has the same value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related