4

I have two arrays of objects. example

 data1 = [{
     foo: '2',
     box: 'yes',
     id: '1234'
 }, {
     foo: '34',
     box: 'no',
     id: '1235'
 }];

 data2 = [{
     key: 'value',
     key: 'value',
     id: '1234'
 }, {
     key: 'value',
     key: 'value',
     id: '1235'
 }];

I need it like this based on matching id value : each obj has a unique key id, that much the second array.

finalData = [{
    foo: '2',
    box: 'yes',
    id: '1234',
    key: 'value',
    key: 'value'
}, {
    box: '34',
    box: 'no',
    id: '1235',
    key: 'value',
    key: 'value'
}];

basically merging the two arrays of objects based on key id .

1
  • Thanks, that works perfectly fine. what if on the objects I want to keep the key names that match but has a different value. Commented May 5, 2018 at 18:40

4 Answers 4

3

Use Object.assign for this so that you can combine the array with the common id value, use find having condition that compares the id of both the objects.

var data1 =[ {foo:'2',box:'yes',id:'1234'},{foo:'34',box:'no',id:'1235'} ]; 
var data2 =[{key:'value',key2:'value2', id:'1234'},{key:'value',key2:'value2', id:'1235'}];

data1.map(x => Object.assign(x, data2.find(y => y.id == x.id)));

console.log(data1);

Since you have same key name multiple times which is ignored by the JSON object so I have taken a new property name key2 for this example.

Sign up to request clarification or add additional context in comments.

1 Comment

Don't use map unless the mapped array is used. Otherwise, use forEach. Your answer also mutates the original objects in data1.
3

building on @Ankit answer, you can use the spread operator too !! something like this

var data1 =[ {foo:'2',box:'yes',id:'1234'},{foo:'34',box:'no',id:'1235'} ]; 
var data2 =[{key:'value',key2:'value2', id:'1234'},{key:'value',key2:'value2', id:'1235'}];

const arr = data1.map(x => ({ ...x, ...data2.find(y => y.id == x.id)}));

console.log(arr);

Comments

1

You can also use reduce(), find() of array and Object.assign() to get required result.

DEMO

const data1 = [{foo: '2',box: 'yes',id: '1234'}, {foo: '34',box: 'no',id: '1235'}],
data2 = [{key: 'value',key1: 'value',id: '1234'}, {key: 'value',key1: 'value',id: '1235'}];
  
  let result = data1.reduce((r,{id,...rest})=>{
     let find=data2.find(o=>o.id==id);
     if(find){
        r.push(Object.assign(rest,find));
     }
     return r;
  },[])
  
  console.log(result)
.as-console-wrapper {max-height: 100% !important;top: 0;}

Comments

0

Here is another alternative to achieve this:

  • Iterate over first array and create a new Map object where ids will be used as keys and relevant object as its value.
  • Iterate over second array and update corresponding objects with same ids using Object.assign() in Map object.
  • Return an array of updated objects in Map object.

Demo:

let data1 = [{foo: '2', box: 'yes', id: '1234'}, {foo: '34', box: 'no', id: '1235'}],
    data2 = [{key1: 'value', key2: 'value', id: '1234'}, {key1: 'value', key2: 'value', id: '1235'}];

let merge = (d1, d2, m = new Map(d1.map(o => [o.id, o]))) => (
              d2.forEach(o => m.set(o.id, Object.assign(m.get(o.id), o))),
              [...m.values()]
            );
            
console.log(merge(data1, data2));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Docs:

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.