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);
}
});
You are correct in that Lodash's mergeWith doesn't merge recursively. You can manage this yourself manually.
name property.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.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);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
}, {}
))