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":""}
    ]

The approach in the duplicate is let array3 = array1.map(obj1 => ({ ...obj1, ...array2.find(obj2 => obj2.id === obj1.id) })); — Wyck
– Wyck, Commented Feb 5, 2024 at 2:50

Alexander Nenashev · Accepted Answer · 2024-02-05 10:04:53Z

Make an empty object to assign in case of no match
Put all new objects from array2 into a map by id
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);

Hoppix · Accepted Answer · 2024-02-05 03:04:01Z

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);

brk · Accepted Answer · 2024-02-05 03:57:04Z

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()))

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related