Merge two array of objects in Javascript

Viewed 189

I have two array of objects:

let genericObj = [{"name": "success", }, {"name": "failure"}, {"name":"timeout"}, {"name": "max"}, {"name": "min"}, {"name": "avg"}]
let x = [
    { y: 14037 },
    { y: 0 },
    { y: 0 },
    { y: 1.1960000000000002 },
    { y: 0.089 },
    { y: 0.18 }
  ];

I want to merge the two so I have an array of object

let finalObj= [{"name": "success", y: 23432}, {"name": "fail", y: 23423}] etc

I have tried a few things but it's not working for me.

8 Answers

You could take the arrays in an array and merge the objects by index.

This approach works for any count of arrays.

let genericObj = [{"name": "success", }, {"name": "failure"}, {"name":"timeout"}, {"name": "max"}, {"name": "min"}, {"name": "avg"}],
    x = [{ y: 14037 }, { y: 0 }, { y: 0 }, { y: 1.1960000000000002 }, { y: 0.089 }, { y: 0.18 }],
    result = [genericObj, x].reduce((a, b) => a.map((o, i) => ({ ...o, ...b[i] })));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

I'm assuming that you just want to "zip" two objects. If so you can use Array.map along with Object.assign:

let genericObj = [{"name": "success", }, {"name": "failure"}, {"name":"timeout"}, {"name": "max"}, {"name": "min"}, {"name": "avg"}]
let x = [
    { y: 14037 },
    { y: 0 },
    { y: 0 },
    { y: 1.1960000000000002 },
    { y: 0.089 },
    { y: 0.18 }
  ];
  
let result = genericObj.map((obj, i) => Object.assign(obj, x[i]));
console.log(result);

map is a good way to achieve this.

genericObj.map((item, i) => ({...item, ...x[i]}));

let genericObj = [{"name": "success", }, {"name": "failure"}, {"name":"timeout"}, {"name": "max"}, {"name": "min"}, {"name": "avg"}]
let x = [
    { y: 14037 },
    { y: 0 },
    { y: 0 },
    { y: 1.1960000000000002 },
    { y: 0.089 },
    { y: 0.18 }
  ];
let newObj = genericObj.map((item, i) => ({...item, ...x[i]}));

console.log(newObj)

is this what you need

let genericObj = [{"name": "success", }, {"name": "failure"}, {"name":"timeout"}, {"name": "max"}, {"name": "min"}, {"name": "avg"}]
let x = [
    { y: 14037 },
    { y: 0 },
    { y: 0 },
    { y: 1.1960000000000002 },
    { y: 0.089 },
    { y: 0.18 }
  ];
  
  
  finalObj=genericObj.map((z,i)=>{return({...z,y:x[i].y})});



document.write(JSON.stringify(finalObj));

const genericObj = [
    {"name": "success"},
    {"name": "failure"},
    {"name":"timeout"},
    {"name": "max"},
    {"name": "min"},
    {"name": "avg"}
];
const x = [
    { y: 14037 },
    { y: 0 },
    { y: 0 },
    { y: 1.1960000000000002 },
    { y: 0.089 },
    { y: 0.18 }
  ];

function getData1(genericObj, x) {
    let result = genericObj.map((obj, i) => Object.assign(obj, x[i]));
    return result;
}

function getData2(genericObj, x) {
    let result = [genericObj, x].reduce((a, b) => a.map((o, i) => ({ ...o, ...b[i] })));
    return result;
}

function time(fn) {
    const start = performance.now();
    let result = fn();
    const end = performance.now();
    console.log(result);
    console.log(`Benchmark took ${end - start} milliseconds`);
}

time(() => getData1(genericObj, x)); //too fast

time(() => getData2(genericObj, x)); //slow

output snapshot: enter image description here

Just loop through and push each object from one of the arrays into the other array.

array2.forEach(item => {
    array1.push(item);
});

Use Object.assign()

var finalObj = Object.assign({}, genericObj, x);

console.log(finalObj);

This is how you can solve your problem, just used es6/spred:

let merge = [...genericObj,...x]
Related