CODEWITHSUNDEEP
javascriptarraysfor-loop
fivedoor
fivedoor

Reputation: 389

create an array of objects from an object and array

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/

Upvotes: 2

Views: 72

Answers (6)

Jonathan Watmough
Jonathan Watmough

Reputation: 886

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

Upvotes: 0

Luca Mele
Luca Mele

Reputation: 66

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)

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23622

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/

Upvotes: 0

Keith
Keith

Reputation: 24181

You could try something like this ->

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

Upvotes: 0

Redu
Redu

Reputation: 26161

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)

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 1

Related Questions