create an array of objects from an object and array

Question

I have an object:

items =  {
    0: "foo",
    1: "bar",
    2: "baz"
};

and an array:

category = [
    "type1",
    "type2",
    "type3"
];

I want to merge these with the desired output:

newArray = [
    {type1:"foo"},
    {type2:"bar"},
    {type3:"baz"}
];

I thought I would be able to do it quite simply with a for loop like the following (though any method would do):

var obj = {};
for (var i = 0; i < category.length; i++) { 
    obj [category[i]] = items[i];
    newArray.push(obj);
}

What I actually get is :

[{"type1":"foo","type2":"bar","type3":"baz"},
 {"type1":"foo","type2":"bar","type3":"baz"},
 {"type1":"foo","type2":"bar","type3":"baz"}]

I guess it's iterating through all instances of i for each obj each time but how do I amend to get the desired output?

https://jsfiddle.net/ormxq0y4/3/

Can you please post your expected output

Deepak
– Deepak

2016-09-26 11:09:46 +00:00
Commented Sep 26, 2016 at 11:09 — Deepak
– Deepak, Commented Sep 26, 2016 at 11:09

charlietfl · Accepted Answer · 2016-09-26 11:06:43Z

1

you want a new object for each iteration

for (var i = 0; i < category.length; i++) { 
   var obj = {};
   obj [category[i]] = items[i];
   newArray.push(obj);
}

answered Sep 26, 2016 at 11:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

Md. Khairul Hasan Over a year ago

Please explain why this works? and what was the problem in the code provided by OP.

charlietfl Over a year ago

@Md.KhairulHasan what part of explanation isn't clear?

fivedoor Over a year ago

thanks that works perfectly. So just to clarify the error was that when the obj was declared outside the for loop it's just the same obj that gets pushed to the array 3 times ? thanks

charlietfl Over a year ago

yes...you were always adding new property to same object as well as pushing same object reference into array each time. Thus all elements ended up being exact same object

Redu · Accepted Answer · 2016-09-26 11:12:16Z

1

I guess this should do it;

var items =  {
  0: "foo",
  1: "bar",
  2: "baz"
},
 category = [
  "type1",
  "type2",
  "type3"
],

 newArray = category.map((e,i) => ({[e]:items[i]}));
console.log(newArray)

answered Sep 26, 2016 at 11:12

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Comments

Keith · Accepted Answer · 2016-09-26 11:13:28Z

0

You could try something like this ->

category.forEach(function (e,i) {
  var obj = {};
  obj[e] = items[i];
  newArray.push(obj);
});

answered Sep 26, 2016 at 11:13

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Comments

Thalaivar · Accepted Answer · 2016-09-26 11:17:29Z

0

var items =  {
  0: "foo",
  1: "bar",
  2: "baz"
},
 category = [
  "type1",
  "type2",
  "type3"
];

var reformattedArray = category.map(function(obj, index){ 
   var rObj = {};
   rObj[obj] = items[index];
   return rObj;
});

console.log("reformattedArray", reformattedArray);

https://jsfiddle.net/s6ntL2eo/

answered Sep 26, 2016 at 11:17

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

Comments

Luca Mele · Accepted Answer · 2016-09-26 11:21:53Z

0

Here is how i would do it. But in my honest opinion is a bit risky if you relay only on the items KEY to be the connection point for the array. Please also keep in mind that an object allows the key to be eigther string or number (that's why items[+key]).

var items =  {
  0: "foo",
  1: "bar",
  2: "baz"
};


var categories = [
  "type1",
  "type2",
  "type3"
];

var newArray = [];

categories.forEach(function (category, key) {
  if (items[+key]) {
    var tmpO = {};
    tmpO[category] = items[+key];
    newArray.push(tmpO);
  }
});

console.log(newArray)

answered Sep 26, 2016 at 11:21

Luca Mele

663 bronze badges

Comments

Jonathan Watmough · Accepted Answer · 2016-09-26 11:28:07Z

0

You are not making a separate object each time. Instead you are pushing the same object three times, and adding type1, type2, type3 properties to this one object.

Simply moving var obj = {} into the loop fixes your issue.

newArray = [];
 
items =  {
  0: "foo",
  1: "bar",
  2: "baz"
};

category = [
  "type1",
  "type2",
  "type3"
];

for (var i = 0; i < category.length; i++) { 
  var obj = {};
  obj[category[i]] = items[i];
  newArray.push(obj);
}

var title = document.getElementById("title");
title.innerHTML = JSON.stringify(newArray);

With the result: [{"type1":"foo"},{"type2":"bar"},{"type3":"baz"}]

answered Sep 26, 2016 at 11:28

Jonathan Watmough

8869 silver badges12 bronze badges

Collectives™ on Stack Overflow

create an array of objects from an object and array

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related