PlayMa256
Reputation: 6831
Merging Two Objects with arrays inside of it
I'm trying to merge two javascript objects that has inside of it arrays and other elements. Let me give you an example.
{
"addresses": [
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839332"
},
{
"type": "email",
"tags": [
"Mãe"
],
"address": "[email protected]"
},
{
"type": "email",
"tags": [
"Aluno"
],
"address": "[email protected]"
}
],
"class": [
"Sala 1",
"Sala 2",
"Sala 3"
],
"fullname": "John Doe 1",
"eid": "2",
"invisible": true,
"see_all": false
},
{
"addresses": [
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "phone",
"tags": [
"Pai"
],
"address": "5519985504400"
},
{
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839333"
},
{
"type": "email",
"tags": [
"Mãe"
],
"address": "11 983340440"
},
{
"type": "email",
"tags": [
"Aluno"
],
"address": ""
}
],
"class": [
"Sala 4",
"Sala 5",
"Sala 6"
],
"fullname": "John Doe 1",
"eid": "2",
"invisible": false,
"see_all": true
}
As you can see, we can have arrays inside with some strings in those arrays. I've tried to do it using some recursion, but had no success.
function mergeObjects(target, source){
var item, tItem, o, idx;
if (typeof source == 'undefined') {
return source;
} else if (typeof target == 'undefined') {
return target;
}
for (var prop in source) {
item = source[prop];
//check if the first element is indeed an object.
if (typeof item == 'object' && item !== null) {
//if the first item is an array
if (_.isArray(item) && item.length) {
//dealing with array of primitives
if (typeof item[0] != 'object') {
item.forEach(function(conteudo){
//push to the target all the elements;
target[prop].push(conteudo);
});
}else{
//dealing with array of objects;
for(var attr in item){
idx = {};
tItem = target[attr]
mergeObjects(tItem,item);
}
}
}//if its a normal object
else {
// deal with object
mergeObjects(target[prop],item);
}
} else {
// item is a primitive, just copy it over
target[prop] = item;
}
}
return target;
}
I Expected this:
{
"addresses": [
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "phone",
"tags": [
"Pai"
],
"address": "5519985504400"
},
{
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839333"
},
{
"type": "email",
"tags": [
"Mãe"
],
"address": "11 983340440"
},
{
"type": "email",
"tags": [
"Aluno"
],
"address": ""
}
],
"class": [
"Sala 4",
"Sala 5",
"Sala 6",
"Sala 1",
"Sala 2",
"Sala 3"
],
"fullname": "John Doe 1",
"eid": "2",
"invisible": true,
"see_all": false
}
"fullname": "John Doe 1",
"eid": "1234",
"classes": [
"Sala 1",
"Sala 2",
"Sala 3",
"Sala 4",
"Sala 5",
"Sala 6"
],
"addresses": [{
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839332"
}, {
"type": "email",
"tags": [
"Mãe"
],
"address": "[email protected]"
}, {
"type": "email",
"tags": [
"Aluno"
],
"address": "[email protected]"
}, {
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
}, {
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
}, {
"type": "phone",
"tags": [
"Pai"
],
"address": "5519985504400"
}, {
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839333"
}],
"invisible": true,
"see_all": true
}
But what i got was this, as you can see, some email elements are missing.
{
"addresses": [
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "email",
"tags": [
"Responsável",
"Pai"
],
"address": "[email protected]"
},
{
"type": "phone",
"tags": [
"Pai"
],
"address": "5519985504400"
},
{
"type": "phone",
"tags": [
"Responsável",
"Mãe"
],
"address": "551138839333"
},
{
"type": "email",
"tags": [
"Mãe"
],
"address": "11 983340440"
},
{
"type": "email",
"tags": [
"Aluno"
],
"address": ""
}
],
"class": [
"Sala 4",
"Sala 5",
"Sala 6",
"Sala 1",
"Sala 2",
"Sala 3"
],
"fullname": "John Doe 1",
"eid": "2",
"invisible": true,
"see_all": false
}
Order of elements is not a problem.
Which point of the recursion tree did i miss?
Upvotes: 1
Views: 268
Answers (1)
David Calhoun
Reputation: 8581
Short answer: you have to merge the arrays yourself first. Or you can use something nice like Lodash's mergeWidth Ramda's R.mergeWith (see below for sample code for Ramda).
You want something like the native Object.assign (limited browser support, so it will have to be polyfilled) or whatever merge your JS library has.
The problem you're running into is how all of these merge implementations handle duplicate keys. Usually the key will be set to the last value passed in:
var thing1 = {
someProperty: 'foo'
};
var thing2 = {
someProperty: 'bar'
};
var result1 = Object.assign({}, thing1, thing2);
// -> {someProperty: 'bar'} (set to the last value passed in, in thing2)
var result2 = Object.assign({}, thing2, thing1);
// -> {someProperty: 'foo'} (again set to the last value passed in, in thing1)
// Make the Stackoverflow snippet display the output.
document.body.innerHTML += JSON.stringify(result1, null, 2);
document.body.innerHTML += '<br>' + JSON.stringify(result2, null, 2);Works the same way with your example, except the property is a more complicated array. It's just being set to the last array passed in:
var thing1 = {
someList: [1, 2, 3]
};
var thing2 = {
someList: [4, 5, 6]
};
var result = Object.assign({}, thing1, thing2);
// -> {someList: [4, 5, 6]}
// Make the Stackoverflow snippet display the output.
document.body.innerHTML = JSON.stringify(result, null, 2);If you use something nice like Ramda, you can merge and specify a function to control the behavior when keys are equal, like in your case. Here we can check if the value is an array, then concatenate if so. Otherwise, return the latest value (as described above):
var thing1 = {someList: [1, 2, 3]};
var thing2 = {someList: [4, 5, 6]};
var dupeMergeFn = function(a, b) {
return (Array.isArray(a)) ? a.concat(b) : b;
};
var result = R.mergeWith(dupeMergeFn, thing1, thing2);
// Make the Stackoverflow snippet display the output.
document.body.innerHTML = JSON.stringify(result, null, 2);<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.19.1/ramda.min.js"></script>Upvotes: 2
Related Questions
- Using async/await with a forEach loop
- How to merge two arrays in JavaScript and de-duplicate items
- How can I merge properties of two JavaScript objects?
- Search an array of JavaScript objects for an object with a matching value
- map function for objects (instead of arrays)
- From an array of objects, extract value of a property as array
- Compare two dates with JavaScript
- Sort array of objects by string property value
- How to store objects in HTML5 localStorage/sessionStorage
- JavaScript closure inside loops – simple practical example