Merging multiple arrays of objects of the same length in JavaScript

Question

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!

you can use manual merging - use loop for() and create new objects... simple I think — demo
– demo, Commented Mar 8, 2019 at 12:50

Lidor Avitan · Accepted Answer · 2019-03-08 13:11:29Z

5

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

edited Mar 8, 2019 at 13:11

answered Mar 8, 2019 at 12:53

Lidor Avitan

1,40411 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adiga · Accepted Answer · 2019-03-08 13:26:27Z

1

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)

edited Mar 8, 2019 at 13:26

answered Mar 8, 2019 at 12:52

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Comments

Nisarg Shah · Accepted Answer · 2019-03-08 12:51:13Z

0

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.

answered Mar 8, 2019 at 12:51

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Comments

Nina Scholz · Accepted Answer · 2019-03-08 12:59:14Z

0

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

answered Mar 8, 2019 at 12:59

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Merging multiple arrays of objects of the same length in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related