How can I merge multiple arrays into multiple separate objects?

Question

I have an object that has multiple arrays that looks something like this.

let obj = { 
    links: ["https://somelink.com/image.jpg", "https://somelink.com/image2.jpg"],
    IDs: ["yCmj", "4q1K"],
}

I want to make it so that it's turned into an array of objects. Like the following.

let newObj = {
   templates: [
      {id:"yCmj", link: "https://somelink.com/image.jpg"}, 
      {id:"4q1K", link: "https://somelink.com/image2.jpg"}
   ] 
}

What I have tried:

I tried mapping the object values to a new array but the second map overwrites the whole array.

let templates = obj.templateIDs.map((id) => ({id}))
templates = obj.thumbnailLinks.map((thumbnailLink) => ({thumbnailLink}))

let newObj = templates

Mr. Polywhirl · Accepted Answer · 2021-04-14 13:52:39Z

1

The easiest way to accomplish this would be to pick either obj.links or obj.IDs and map their values to an object and use the index to locate the corresponding parallel value.

const obj = {
  links: ["https://somelink.com/image.jpg", "https://somelink.com/image2.jpg"],
  IDs: ["yCmj", "4q1K"],
};

const newObj = {
  templates: obj.links.map((link, index) => (id => ({ id, link }))(obj.IDs[index]))
};

console.log(newObj);

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

answered Apr 14, 2021 at 13:52

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

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

1 Comment

Cerbrus Over a year ago

I completely forgot that map accepts callbacks and also has the index parameter... that's much better.

Jamiec · Accepted Answer · 2021-04-14 13:47:18Z

1

This operation is typically called "zipping" 2 arrays:

const zip = (a,b, zipper) => {
  if(a.length != b.length)
    throw "arrays must be the same length";
    
  return a.map( (v,i) => zipper(v,b[i]))
}

const obj = { 
    links: ["https://somelink.com/image.jpg", "https://somelink.com/image2.jpg"],
    IDs: ["yCmj", "4q1K"],
}

const newObj = {
  templates: zip(obj.links, obj.IDs, (link,id) => ({link,id}))
}

console.log(newObj);

answered Apr 14, 2021 at 13:47

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Comments

Som Shekhar Mukherjee · Accepted Answer · 2021-04-15 19:03:26Z

0

You can simply use map.

const obj = {
  links: ["https://somelink.com/image.jpg", "https://somelink.com/image2.jpg"],
  IDs: ["yCmj", "4q1K"],
};

const newObj = {
  templates: obj.links.map((link, i) => ({ link, id: obj.IDs[i] })),
};

console.log(newObj);

edited Apr 15, 2021 at 19:03

answered Apr 14, 2021 at 14:02

Som Shekhar Mukherjee

8,1982 gold badges16 silver badges34 bronze badges

Comments

punjabi · Accepted Answer · 2021-04-14 14:26:21Z

-1

let obj = { 
    links: ["https://somelink.com/image.jpg", "https://somelink.com/image2.jpg","https://somelink.com/image2.jpg"],
    IDs: ["yCmj", "4q1K","34er"],
}
let propsKey = Object.keys(obj)
let finalArr =  obj.links.map( ()=> {
         return {}
})

propsKey.forEach( (prop) => {
  obj[prop].forEach( (v,i)=>finalArr[i][prop] = v  )
})
 

console.log(finalArr)

answered Apr 14, 2021 at 14:26

punjabi

4910 bronze badges

Collectives™ on Stack Overflow

How can I merge multiple arrays into multiple separate objects?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related