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/

• Deepak: Can you please post your expected output

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

• Md. Khairul Hasan: Please explain why this works? and what was the problem in the code provided by OP.
• charlietfl: @Md.KhairulHasan what part of explanation isn't clear?
• fivedoor: 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: 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

Answer 2

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)

Answer 3

You could try something like this ->

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

Answer 4

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/

Answer 5

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)

Answer 6

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"}]