Map over two arrays of objects, match properties and store specific info in a new array

Question

New to javascript and trying to learn! I am trying to map through two array of objects, and if a certain property matches, pull in specific information into an array.

let result;

let arrNames = [{
  name: "A"
}, {
  name: "B"
}, {
  name: "C"
}]

let arrInfo = [{
  name: "A",
  info: "AAA"
}, {
  name: "B",
  info: "BBB"
}, {
  name: "C",
  info: "ccc"
}]

If arrNames.name == arrInfo.name, I would like result to equal arrInfo.info.

What I've tried:

arrNames.map(x => {
if(arrNames.name == arrInfo.name){
   result=arrInfo.info
}

^ This obviously doesn't work -- but I'm wondering if Assign or Filter would be appropriate.

Thanks in advance for your help (apologies that this is probably a dupe)!

Analyze

Don't modify the question when existing answers address your original question. Ask a new question instead (I see that you already did). Rolling back to previous version. – Pluck

Answer 1

You can use find() inside map() to find the element. This finds the element even if they aren't at the same index in both arrays.

Then use filter() to filter any undefined values which will be present if there isn't a match.

var arrNames = [
   {name: "A"},
   {name: "B"},
   {name: "C"}
];

var arrInfo = [
   {name: "A", info: "AAA"},
   {name: "B", info: "BBB"},
   {name: "C", info: "ccc"}
];

let result = arrNames.map(x => {
  item = arrInfo.find(item => item.name === x.name);
  if (item) { 
    return item.info;
  }      
}).filter(item => item !== undefined); // Can also use filter(item => item);

console.log(result);

Pluck

Answer 2

let result = [];

arrNames = [
   {name: "A"},
   {name: "B"},
   {name: "C"},
]

arrInfo = [
   {name: "A", info: "AAA"},
   {name: "B", info: "BBB"},
   {name: "C", info: "ccc"},
]

result = arrNames.map(function(_, index){
  if(arrNames[index].name === arrInfo[index].name) {
    return arrInfo[index].info
  }
})

Patch

Answer 3

You can use map with a condition inside

el.name === arrNames[index].name && el.info

Means:

if (el.name === arrNames[index].name) return el.info

let arrNames = [{
  name: "A"
}, {
  name: "B"
}, {
  name: "C"
}]

let arrInfo = [{
  name: "A",
  info: "AAA"
}, {
  name: "B",
  info: "BBB"
}, {
  name: "C",
  info: "ccc"
}]


const res = arrInfo.map((el, index) => el.name === arrNames[index].name && el.info)

console.log(res)

Cleland