How can you merge two objects into same property in JavaScript?

user_12853199 0
Viewed 66

I have 2 separate JS objects which need to be merged into the same property.

The objects currently look like this:

Object 1:

[0:{"acircuit":"ABCDEFGH","astatus":"Test"}, 1:{"acircuit":"IJKLMNOP","astatus":"Test2"}]

Object 2:

[0:{"bcircuit":"ABCDEFGH","bstatus":"Test3"}, 1:{"bcircuit":"IJKLMNOP","bstatus":"Test4"}]

I need to merge these results into one so it appears as the following:

[
    0:{"acircuit":"ABCDEFGH","astatus":"Test","bcircuit":"ABCDEFGH","bstatus":"Test3"}, 
    1:{"acircuit":"IJKLMNOP","astatus":"Test2","bcircuit":"IJKLMNOP","bstatus":"Test4"}
]

Current code looks like this:

allResults = {this.state.aCircuitResults.concat(this.state.bCircuitResults)}

However, the results appear like this:

[
    0:{"acircuit":"ABCDEFGH","astatus":"Test"},
    1:{"acircuit":"IJKLMNOP","astatus":"Test2"}
    2:{"bcircuit":"ABCDEFGH","bstatus":"Test3"}, 
    3:{"bcircuit":"IJKLMNOP","bstatus":"Test4"}
]

Thanks in advance.

reactjs object merge arrays javascript
2 Answers

You could use map and Object.assign, assuming you want to combine them by where they are in the arrays:

const result = firstArray.map((firstObject, index) => Object.assign({}, firstObject, secondArray[index]));

Example:

const firstArray = [{"acircuit":"ABCDEFGH","astatus":"Test"},{"acircuit":"IJKLMNOP","astatus":"Test2"}];

const secondArray = [{"bcircuit":"ABCDEFGH","bstatus":"Test3"},{"bcircuit":"IJKLMNOP","bstatus":"Test4"}];

const result = firstArray.map((firstObject, index) => Object.assign({}, firstObject, secondArray[index]));

console.log(result);

If you need to relate them by a property (say, acircuit and bcircuit), build a Map from one of them keyed by the property, then you can use a lookup in the map operation:

const second = new Map(secondArray.map(obj => [obj.bcircuit, obj]));
const result = firstArray.map(firstObject => Object.assign({}, firstObject, second.get(firstObject.acircuit)));

Example:

const firstArray = [{"acircuit":"ABCDEFGH","astatus":"Test"},{"acircuit":"IJKLMNOP","astatus":"Test2"}];

const secondArray = [{"bcircuit":"ABCDEFGH","bstatus":"Test3"},{"bcircuit":"IJKLMNOP","bstatus":"Test4"}];

const second = new Map(secondArray.map(obj => [obj.bcircuit, obj]));
const result = firstArray.map(firstObject => Object.assign({}, firstObject, second.get(firstObject.acircuit)));

console.log(result);

user_1572470

Using Array.prototype.map() in combination with spread syntax:

const result = arrayA.map((a, i) => ({...a, ...arrayB[i]}));

Complete snippet: 

const arrayA = [{"acircuit":"ABCDEFGH","astatus":"Test"}, {"acircuit":"IJKLMNOP","astatus":"Test2"}];
const arrayB = [{"bcircuit":"ABCDEFGH","bstatus":"Test3"}, {"bcircuit":"IJKLMNOP","bstatus":"Test4"}];

const result = arrayA.map((a, i) => ({...a, ...arrayB[i]}));

console.log(result);

user_35589600
Related