How to assign the value of one attribute of one array of object to the similarly named attribute of another array of object? - Javascript

Question

This is my code

I have 2 arrays of objects - arr1 and arr2

  var arr1 = [{
        id: 1,
        city: 'London',
        'checked': false
        },
        {
        id: 2,
        city: 'NYC',
        'checked': false
        },
        {
        id: 3,
        city: 'Paris',
        'checked': false
        },
        {
        id: 4,
        city: 'Madrid',
        'checked': false
        }];


 var arr2 = [{
        id: 1,
        city: 'Madrid',
        'checked': true
        },
        {
        id: 2,
        city: 'Paris',
        'checked': false
        },
        {
        id: 3,
        city: 'NYC',
        'checked': true
        },
        {
        id: 4,
        city: 'London',
        'checked': false
        }];

Using these 2 array of objects, I want to create a arr3 variable/array of objects (arr3 will retain the order of arr1 - first London, then NYC, third Paris and last Madrid. I only want to get the checked of arr2 objects and put that field (checked attribute) value in arr1 and create arr3. The order should not be changed, just the checked of arr1 will get its value from checked of arr2.

  var arr3 = [{
        id: 1,
        city: 'London',
        'checked': false
        },
        {
        id: 2,
        city: 'NYC',
        'checked': true
        },
        {
        id: 3,
        city: 'Paris',
        'checked': false
        },
        {
        id: 4,
        city: 'Madrid',
        'checked': true
        }];

I also have an option of not using arr3, then I can directly do the changes in arr1. This is also another way. Any technique will work for me.

Updated - the order of id attribute in arr3 should be same as it is in arr1

Answer 1

Explained

With this approach, it uses more of a modern approach, makign use of functions such as map and find, plus personally I find that this implementation is pretty much as simplistic as it could possibly be.

If you're not familiar with the 'arrow function' syntax, you can find plenty of documentation online, such as this. But as you can see, the beauty of this approach is that it's clean, concise and simple.

This implementation is somewhat similar to the answer provided by @holydragon, however when you use a forEach function, you're allowing for side effects to occur, at least with this implementation, by making use of map, this should reduce the chances of side effects within your code.

Furthermore, I've also made use of the destructuring assignment just to further reduce the chance(s) of side effects in this snippet.

Update

I've implemented my solution using the destructuring assignment not because it's 'modern' or anything silly like that. It's because without creating a copy of the object(s), when modifying the checked property for the objects in arr3, the checked properties in the objects found within arr1 would also get updated.

This is an example of a side effect, if you'd like to delve more into functional programming, related concepts and specifically functional programming with JavaScript, I strongly recommend that you read some of Eric's content. Personally I'm a fan of the content that Eric publishes, and when I was trying to apply functional programming concepts to JavaScript, I found his content useful.

var arr1 = [{id:1,city:"London",checked:!1},{id:2,city:"NYC",checked:!1},{id:3,city:"Paris",checked:!1},{id:4,city:"Madrid",checked:!1}];
var arr2 = [{id:1,city:"Madrid",checked:!0},{id:2,city:"Paris",checked:!1},{id:3,city:"NYC",checked:!0},{id:4,city:"London",checked:!1}];


var arr3 = arr1.map(({...o}) => {
  o.checked = arr2.find(x => x.city === o.city).checked;
  return o;
});
console.log(arr3);

// If you want a one line solution... 
var arr4 = arr1.map(({...o}) => Object.assign(o, {checked : arr2.find(x => x.city === o.city).checked}));
console.log(arr4);