Merge into object array from object by key

Question

My goal is to update an object array by matching an id with another object containing a matching key to update the object array's value key.

Working with an object array like:

const objArr = [
  {
    id: 6,
    name: 'Activity Attendance',
    type: 'Number',
    value: '2000',
    nameChanged: false,
    typeChanged: false,
    internalName: 'activity_attendance'
  },
  {
    id: 123,
    name: 'Total Number of Interacted Consumers',
    type: 'Number',
    value: '400',
    nameChanged: false,
    typeChanged: false,
    internalName: 'total_number_of_interacted_consumers'
  },
  {
    id: 140,
    name: 'Booth Location',
    type: 'Select (Single Answer)',
    value: '',
    nameChanged: false,
    typeChanged: false,
    internalName: 'booth_location'
  }
];

And an object like:

const obj = {
  '6': '1500',
  '123': '180',
  '140': ''
};

Desired outcome:

const objArr = [
  {
    id: 6,
    name: 'Activity Attendance',
    type: 'Number',
    value: '1500',
    nameChanged: false,
    typeChanged: false,
    internalName: 'activity_attendance'
  },
  {
    id: 123,
    name: 'Total Number of Interacted Consumers',
    type: 'Number',
    value: '180',
    nameChanged: false,
    typeChanged: false,
    internalName: 'total_number_of_interacted_consumers'
  },
  {
    id: 140,
    name: 'Booth Location',
    type: 'Select (Single Answer)',
    value: '',
    nameChanged: false,
    typeChanged: false,
    internalName: 'booth_location'
  }
];

I have started down the route of mapping the objArr, but am not sure of how to proceed to make the "match" within obj to get the correct value to update. My failing attempt:

objArr.map(i => i.id.includes(Object.keys(obj).map(o => Number(o))));

How can I can merge into an array of objects from an object?

Are you okay with modifying the original objArr or are you deliberately wanting to create a new array? — Kevin Jantzer
– Kevin Jantzer, Commented Oct 8, 2018 at 19:25

Andriy · Accepted Answer · 2018-10-08 19:39:29Z

Here is solution using map() function and spread (...) operator:

var objArr = [
  {
    id: 6,
    name: 'Activity Attendance',
    type: 'Number',
    value: '2000',
    nameChanged: false,
    typeChanged: false,
    internalName: 'activity_attendance'
  },
  {
    id: 123,
    name: 'Total Number of Interacted Consumers',
    type: 'Number',
    value: '400',
    nameChanged: false,
    typeChanged: false,
    internalName: 'total_number_of_interacted_consumers'
  },
  {
    id: 140,
    name: 'Booth Location',
    type: 'Select (Single Answer)',
    value: '',
    nameChanged: false,
    typeChanged: false,
    internalName: 'booth_location'
  }
];

var obj = {
  '6': '1500',
  '123': '180',
  '140': ''
};

console.log(objArr.map(i => ({
  ...i,
  value: obj[i.id] ? obj[i.id] : i.value 
})))

Kevin Jantzer · Accepted Answer · 2018-10-08 19:28:10Z

If you are okay with modifying the original array, this will do the trick:

Just loop through the original object and check if there is an update

objArr.forEach(o=>{
    if( obj[o.id] )
        o.value = obj[o.id]
});

Example:

var objArr = [
  {
    id: 6,
    name: 'Activity Attendance',
    type: 'Number',
    value: '2000',
    nameChanged: false,
    typeChanged: false,
    internalName: 'activity_attendance'
  },
  {
    id: 123,
    name: 'Total Number of Interacted Consumers',
    type: 'Number',
    value: '400',
    nameChanged: false,
    typeChanged: false,
    internalName: 'total_number_of_interacted_consumers'
  },
  {
    id: 140,
    name: 'Booth Location',
    type: 'Select (Single Answer)',
    value: '',
    nameChanged: false,
    typeChanged: false,
    internalName: 'booth_location'
  }
];

var obj = {
  '6': '1500',
  '123': '180',
  '140': ''
};

// loop through the array of objects
objArr.forEach(o=>{

    // see if there is an update in the `obj` var
    if( obj[o.id] )
        o.value = obj[o.id] // apply the update
});

console.log(objArr)

Mukesh Verma · Accepted Answer · 2018-10-08 19:29:08Z

0

In plain javascript I would do something like this

objArr.forEach(element => {
  let value = obj[parseInt(element.id)];
  if(value){
    element.value = value;
  }
});

answered Oct 8, 2018 at 19:29

Mukesh Verma

5445 silver badges9 bronze badges

Comments

lealceldeiro · Accepted Answer · 2018-10-08 19:48:04Z

You could do it like this (which doesn't modify the original value of objArr):

const result = objArr.map(o => Object.keys(obj).includes(o.id.toString()) ? Object.assign(o, {value: obj[o.id]}) : o);

Object.keys(obj).includes(o.id.toString()): check whether in obj is an entry with a key corresponding to an id in objArr (see Object.keys)
Object.assign(o, {value: obj[o.id]}) : o): if so, create new a object with the value in objArr, but override value (see Object.assign). If not, return the same object.

Demo:

const objArr = [
  {
    id: 6,
    // ...
    value: '2000'
    // ...
  },
  {
    id: 123,
    // ...
    value: '400'
    // ...
  },
  {
    id: 140,
    // ...
    value: ''
    // ...
  }
];

const obj = {
  '6': '1500',
  '123': '180',
  '140': ''
};

const result = objArr.map(o => Object.keys(obj).includes(o.id.toString()) ? Object.assign(o, {value: obj[o.id]}) : o);

console.log(result);

Grant Miller · Accepted Answer · 2018-10-09 00:53:12Z

0

You can use the following example to solve your problem:

objArr.forEach(i => i.value = Object.keys(obj).includes(String(i.id)) ? obj[i.id]: i.value);

edited Oct 9, 2018 at 0:53

Grant Miller

29.2k16 gold badges157 silver badges171 bronze badges

answered Oct 8, 2018 at 19:48

stalkert

264 bronze badges

Collectives™ on Stack Overflow

Merge into object array from object by key

5 Answers 5

Comments

If you are okay with modifying the original array, this will do the trick:

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

If you are okay with modifying the original array, this will do the trick:

Comments

Comments

Comments

Comments

Related