I have following arrays:

arrOne = [{id:1, name:"abc", age:12},{id:2, name: "xyz", age: 13}]
arrTwo = [{id:1, school:"gem"},{id:2, school: "jyoti"}]

I want to have "name" and "age" field from arrOne to be added in arrTwo as follows:

final:

arrTwo = [{id:1, school:"gem", name: "abc", age:12},{id:2, school: "jyoti", name:"xyz", age:13}]

How can i achieve this in javascript?

CodePudding user response：

Well this is a quick and more efficient implementation but assumes a few things:

• that ids are always numbers
• that both arrays all have the sames ids (array 1 has id 3 and array 2 also has id 3)

//requested function
function merge(arr1, arr2){
    if(arr1.length !== arr2.length){
        throw new Error("array length must be equal")
    }
    //sort by id (remove this if you know they are sorted properly)
    let sortedArr1 = arr1.sort((a,b) => a.id - b.id);
    let sortedArr2 = arr2.sort((a,b) => a.id - b.id);


    let newArr = [];
    for(let i = 0; i < arr1.length; i  ){
        //shallow copies the objects an unpacks them. Google object destructuring  in js for explanations
        newArr.push({...sortedArr1[i], ...sortedArr2[i]})
    }
    return newArr
}

CodePudding user response：

Or this one based on your new edit.

let arrOne = [{id:1, name:"abc", age:12},{id:2, name: "xyz", age: 13}]
let arrTwo = [{id:1, school:"gem"},{id:2, school: "jyoti"}]
let arrThree = []
arrTwo.forEach((e,index)=>{
arrThree.push({
id: arrTwo[index].id,
school: arrTwo[index].school,
name: arrOne[index].name,
age: arrOne[index].age})
})
console.log(arrThree)

CodePudding user response：

Something like this works as well.

const arrOne = [{id:1, name:"abc"},{id:2, name: "xyz"}]
const arrTwo = [{id:1, school:"gem"},{id:2, school: "jyoti"}]

arrOne.forEach(objOne => {  
  const foundIndex = arrTwo.findIndex(objTwo => objTwo.id === objOne.id)
  if (foundIndex > -1) {
    const objToModify = arrTwo[foundIndex]
    objToModify.name = objOne.name
    // objToModify.age = objOne.age
    // add as many properties as you like
    arrTwo[foundIndex] = objToModify    
  }
})

console.log(arrTwo)

Walkthrough

1. We loop through arrOne, going through each object
2. For every object in arrOne we try to find an object in arrTwo with the same id.
3. We use findIndex to get the position of the object within the array.
4. Modify the object and add the name property (and more if you want)
5. Put the new object at the same position.

Few points

• The arrays don't have be of equal length.
• You can add as many properties as you like from array one to array two
• Modifies array two instead of creating the third array

CodePudding user response：

• Using Array#reduce, iterate over arrOne while updating a Map where the id is the key and an object with name and age is the value
• Using Array#forEach, iterate over arrTwo and set the name and age with the help of Map#get:

const 
  arrOne = [{id:1, name:"abc", age:12},{id:2, name: "xyz", age: 13}],
  arrTwo = [{id:1, school:"gem"},{id:2, school: "jyoti"}]
  
const idNameMap = arrOne.reduce((map, { id, name, age }) => 
  map.set(id, { name, age })
, new Map);

arrTwo.forEach(e => {
  const { name, age } = idNameMap.get(e.id) ?? {};
  e.name = name;
  e.age = age;
});

console.log(arrTwo);