Merge two arrays to multiple objects

Question

I already have an object witch has two arrays:

const services = {
        iconAndLink: [
            'Icon1',
            'Icon2',
            'Icon3',
        ],
        name: [
            'Name1',
            'Name2',
            'Name3',
        ],
    };

I looked into Object.assign(), array.reduce(), map etc... and can't seem to find a decent answer here that merges these two.

For final result I need:

services = [
        {
            icon: 'Icon1',
            name: 'Name1'
        },
        {
            icon: 'Icon2',
            name: 'Name2'
        },
        {
            icon: 'Icon3',
            name: 'Name3'
        },
    ]

Note that I need to have the icon and name keys.

Is this even possible in js?

Yes it is possible. However, will the two arrays always be of the same length? — Terry
– Terry, Commented May 28, 2021 at 20:13
Does this thread help? stackoverflow.com/questions/39127989/… — CroogQT
– CroogQT, Commented May 28, 2021 at 20:13
@CroogQT See that there's a static key here. Just name and icon. — HenrijsS
– HenrijsS, Commented May 28, 2021 at 20:14
You can't use the same variable services for the source and result, since it's declared const. — Barmar
– Barmar, Commented May 28, 2021 at 20:16

Daniel Ramos · Accepted Answer · 2021-05-28 20:16:09Z

4

This should work

const services = {
  iconAndLink: ["Icon1", "Icon2", "Icon3"],
  name: ["Name1", "Name2", "Name3"],
};

let result = services.iconAndLink.map(function (icon, index) {
  return { icon: services.iconAndLink[index], name: services.name[index] };
});


console.log(result);

Make sure both arrays same the same length and both are ordered

answered May 28, 2021 at 20:16

Daniel Ramos

815 bronze badges

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

2 Comments

HenrijsS Over a year ago

@Kinglish posted this with a forEach. What difference does this make with using map?

Daniel Ramos Over a year ago

Both are simillar, but different. Map is more the functional way, and create a new array. forEach allows you to change the original array. The map function will receive a function that will run on each item on array and create a new array with all created objects. You can read more here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… For performance point, map is slight faster (as seen here: morioh.com/p/b2d058745cb8)

Kinglish · Accepted Answer · 2021-05-28 20:14:59Z

1

A simple forEach loop using index would do the trick

const services = {
  iconAndLink: [
    'Icon1',
    'Icon2',
    'Icon3',
  ],
  name: [
    'Name1',
    'Name2',
    'Name3',
  ],
};

let newarray = [];
services.iconAndLink.forEach((el, index) => newarray.push({
      icon: el,
      name: services.name[index]
    })
    );

    console.log(newarray)

answered May 28, 2021 at 20:14

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Comments

ulou · Accepted Answer · 2021-05-28 20:17:34Z

1

const services={iconAndLink:["Icon1","Icon2","Icon3"],name:["Name1","Name2","Name3"]};
    
const res = services.name.map((e, i) => ({
  icon: e,
  name: services.iconAndLink[i]
}))

console.log(res)

answered May 28, 2021 at 20:17

ulou

5,9326 gold badges40 silver badges51 bronze badges

Comments

Most Noble Rabbit · Accepted Answer · 2021-05-28 20:36:39Z

1

Assuming the arrays are of the same size, you can do:

const services = { iconAndLink: [ 'Icon1', 'Icon2', 'Icon3', ], name: [ 'Name1', 'Name2', 'Name3', ], };
const newArr = [];

for (let i = 0; i < services.iconAndLink.length; i++) {
    newArr.push({icon: services.iconAndLink[i], name: services.name[i]})
}

console.log(newArr)

edited May 28, 2021 at 20:36

answered May 28, 2021 at 20:19

Most Noble Rabbit

2,7862 gold badges8 silver badges12 bronze badges

Collectives™ on Stack Overflow

Merge two arrays to multiple objects

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related