Create an array of objects with multiple properties using javascript

Question

How to create an array of objects that has two properties name and shade?

[{
    "name": "black",
    "shade": "dark"
  }, {
    "name": "white",
    "shade": "light"
  },
  {
    "name": "red",
    "shade": "dark"
  }, {
    "name": "blue",
    "shade": "dark"
  },
  {
    "name": "yellow",
    "shade": "light"
  }
]

I have two different arrays now.

name = ["black","white","red","blue","yellow"]
shade = ["dark","light","dark","dark","light"]

How can I achieve this?

I was actually looking for the opposite of this .ie. I have an array of objects and want to split the 2 properties into 2 different arrays. Any idea please ? — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Sep 6, 2019 at 9:52

gurvinder372 · Accepted Answer · 2018-04-19 14:29:16Z

6

Use map

var output = name.map( (s, i) => ({name : s, shade : shade[i]}) );

Demo

var name1 = ["black","white","red","blue","yellow"];

var shade = ["dark","light","dark","dark","light"];

var output = name1.map( (s, i) => ({name : s, shade : shade[i]}) );

console.log( output );

answered Apr 19, 2018 at 14:29

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

1 Comment

HKI345 Over a year ago

Thank you.....if array is if different size and if i want to map first element of property to third element of shade property how would u do that

Octavian Guzu · Accepted Answer · 2018-04-19 14:29:16Z

1

var new_array = [];
// assuming the arrays have the same length
for (var i = 0; i < name.length; i++)
    new_array.push({name: name[i], shade: shade[i]});

answered Apr 19, 2018 at 14:29

Octavian Guzu

571 silver badge6 bronze badges

Comments

Mohammad Usman · Accepted Answer · 2018-04-19 14:29:44Z

1

You can use .map():

let names = ["black", "white", "red", "blue", "yellow"],
    shades = ["dark", "light", "dark", "dark", "light"];

let merge = (a1, a2) => names.map((n, i) => ({name: n, shade: shades[i]}));

console.log(merge(names, shades));

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

answered Apr 19, 2018 at 14:29

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-04-19 14:46:41Z

1

You could take a helper object for addressing the types.

var names = [ "black", "white", "red", "blue", "yellow"],
    shades = ["dark", "light", "dark", "dark", "light"],
    temp = { name: names, shade: shades },
    result = Object
        .keys(temp)
        .reduce(
            (r, k) => (temp[k].forEach((v, i) => (r[i] = r[i] || {})[k] = v), r),
            []
        );

console.log(result);

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

edited Apr 19, 2018 at 14:46

answered Apr 19, 2018 at 14:31

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Create an array of objects with multiple properties using javascript

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