How do you append to an object array by searching a different array for a object and returning a different object in javascript?

Question

Similar to a vlookup in excel. I have 2 object arrays in javascript. I want to look up an object from array #1 in array #2 and push an object from array #2 to the array #1. I want this to happen for each value in array #1. This way I can have a single array with all of the information I want in one place.

for example,

    let array1 = [
        {"first":"Ana","last":"Anderson","id":"0001"},
        {"first":"Bob","last":"Brown","id":"0002"},
        {"first":"Charlie","last":"Clark","id":"0003"},
        {"first":"Danielle","last":"Dunn","id":"0004"}
    ]

    let array2 = [
        {"age":"38","id":"0002","eyeColor":"hazel","hieght":"5.5"},
        {"age":"45","id":"0001","eyeColor":"brown","hieght":"5"},
        {"age":"23","id":"0003","eyeColor":"blue","hieght":"6"}
    ]

How do I make an array that would display the following? I have been trying a for loop with indexof and push

let array3 = [
        {"first":"Ana","last":"Anderson","id":"0001","age":"45","eyeColor":"brown","hieght":"5"},
        {"first":"Bob","last":"Brown","id":"0002","age":"38","eyeColor":"hazel","hieght":"5.5"},
        {"first":"Charlie","last":"Clark","id":"0003","age":"23","eyeColor":"blue","hieght":"6"},
        {"first":"Danielle","last":"Dunn","id":"0004","age":"","eyeColor":"","hieght":""}
    ]

Answer 1

use a loop to iterate through array1 and for each object in array1, searching for a matching id in array2 and merge the information.

let array1 = [
    {"first":"Ana","last":"Anderson","id":"0001"},
    {"first":"Bob","last":"Brown","id":"0002"},
    {"first":"Charlie","last":"Clark","id":"0003"},
    {"first":"Danielle","last":"Dunn","id":"0004"}
];

let array2 = [
    {"age":"38","id":"0002","eyeColor":"hazel","hieght":"5.5"},
    {"age":"45","id":"0001","eyeColor":"brown","hieght":"5"},
    {"age":"23","id":"0003","eyeColor":"blue","hieght":"6"}
];

let array3 = [];

for (let i = 0; i < array1.length; i++) {
    let matchedObject = array2.find(obj => obj.id === array1[i].id) || {};
  
    let mergedObject = { ...array1[i], ...matchedObject };
    
    array3.push(mergedObject);
}

console.log(array3);

Answer 2

Instead of working with the index , you can prefer to create a Map and store the id as key. Then iterate the second object and check if the id matches wit the key of the map. If it match then you can add those properties from the second array to the object of the first array.

let array1 = [{
    "first": "Ana",
    "last": "Anderson",
    "id": "0001"
  },
  {
    "first": "Bob",
    "last": "Brown",
    "id": "0002"
  },
  {
    "first": "Charlie",
    "last": "Clark",
    "id": "0003"
  },
  {
    "first": "Danielle",
    "last": "Dunn",
    "id": "0004"
  }
]

let array2 = [{
    "age": "38",
    "id": "0002",
    "eyeColor": "hazel",
    "hieght": "5.5"
  },
  {
    "age": "45",
    "id": "0001",
    "eyeColor": "brown",
    "hieght": "5"
  },
  {
    "age": "23",
    "id": "0003",
    "eyeColor": "blue",
    "hieght": "6"
  }
];
// create a map object
const map1 = new Map();
//iterate each element of the array and store the value in the map
array1.forEach(item => {
  map1.set(item.id, item)
});
// iterate element from array2 and check if it exists in map1, if exist then update 
// the object by 'concating' the property of the object from both array
array2.forEach(item => {
  map1.has(item.id) && map1.set(item.id, { ...map1.get(item.id),
    ...item
  })

});
console.log(Array.from(map1.values()))

Answer 3

1. Make an empty object to assign in case of no match
2. Put all new objects from array2 into a map by id
3. Iterate array1 and update items either from a map or the empty object

let array1 = [
    {"first":"Ana","last":"Anderson","id":"0001"},
    {"first":"Bob","last":"Brown","id":"0002"},
    {"first":"Charlie","last":"Clark","id":"0003"},
    {"first":"Danielle","last":"Dunn","id":"0004"}
]

let array2 = [
    {"age":"38","id":"0002","eyeColor":"hazel","hieght":"5.5"},
    {"age":"45","id":"0001","eyeColor":"brown","hieght":"5"},
    {"age":"23","id":"0003","eyeColor":"blue","hieght":"6"}
];

const emptyObject = Object.keys(array2[0]).reduce((r, key) => (key !== 'id' && (r[key] = ''), r), {});
const map = array2.reduce((r, item) => (r[item.id] = item, r), {});
array1.forEach(item => Object.assign(item, map[item.id] ?? emptyObject));


console.log(array1);