CODEWITHSUNDEEP
javascriptecmascript-6
AlexMcG
AlexMcG

Reputation: 175

Merging multiple arrays of objects of the same length in JavaScript

Here are examples of the arrays that I need to merge

const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; 
const images = [{image:"..."},{image:"..."},{image:"..."}];

const merged = [{url:"http:/...", image:"..."},{url:"http:/...", image:"..."},{url:"http:/...", image:"..."}]

I have tried Object.assign({},urls, images). That ends up just deleting urls in that instance because it does not deep copy. The keys for each object in the array are the same!

Upvotes: 1

Views: 821

Answers (4)

adiga
adiga

Reputation: 35222

You could map over one of the arrays and use the index to get the other array's item:

const urls = [{url:"http:/0..."},{url:"http:/1..."},{url:"http:/2..."}]; 
const images = [{image:"0..."},{image:"1..."},{image:"2..."}];

const newArray = urls.map((url, i) => ({...url, ...images[i] }) )

console.log(newArray)

Or you could use Array.from like this:

const urls = [{url:"http:/0..."},{url:"http:/1..."},{url:"http:/2..."}],
      images = [{image:"0..."},{image:"1..."},{image:"2..."}];

const length = urls.length

const newArray = Array.from({ length }, (_, i) => ({ ...urls[i], ...images[i] }) )
console.log(newArray)

Upvotes: 1

Lidor Avitan
Lidor Avitan

Reputation: 1404

If you are certainly sure they are both equal size, you definitely can run through one of them with Array.prototype.map method. Actually, you should use Object.assign if you want to merge an object with a more generic way.

const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; 
const images = [{image:"..."},{image:"..."},{image:"..."}];

const results = urls.map((url, index) => 
   Object.assign({}, url, images[index])
);

console.log(results)

ES6

you can use ES6 instead of Object.assign.

const results = urls.map((url, index) => 
  ({...url, ...images[index]})
);

Upvotes: 5

Nina Scholz
Nina Scholz

Reputation: 386560

You could reduce the arrays and assign the object to the object with the same index.

This works for an arbitrary count of arrays.

const
    urls = [{url:"http:/..."}, { url: "http:/..." }, { url: "http:/..." }],
    images = [{ image: "..." }, { image: "..." }, { image: "..." }],
    result = [urls, images]
        .reduce((r, a) => (
            a.forEach((o, i) => Object.assign(r[i] = r[i] || {}, o)),
            r
        ), []);
    
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14541

You could iterate over one of the arrays using Array.prototype.map, and using the index provided to the callback function, you can get corresponding value in the other array.

Here's an example:

const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; 
const images = [{image:"..."},{image:"..."},{image:"..."}];

console.log(urls.map((t, id) => ({ image: images[id].image, url: t.url })));

Here the parameters passed into the callback function are t: the item from urls array and id: index of t in urls array.

Upvotes: 0

Related Questions