How to convert JS Object to Array

Question

I need to convert a hash map

{      "fruit" : ["mango","orange"],     "veg"   : ["carrot"] }  

to

[    { "type" : "fruit" , "name" : ["mango","orange"] } ,   { "type" : "veg" ,   "name" : ["carrot"] }  ] 

how do I do that??

Answer 1

You can do it like this (in a working snippet):

var input = {       "fruit" : ["mango","orange"],      "veg"   : ["carrot"]  }     var output = [], item;    for (var type in input) {      item = {};      item.type = type;      item.name = input[type];      output.push(item);  }    // display result  document.write(JSON.stringify(output));

---

Or, if you or someone else has been extending the Object prototype with enumerable properties (which I think is a bad practice personally), then you could use this to protect from that:

var input = {       "fruit" : ["mango","orange"],      "veg"   : ["carrot"]  }     var output = [], item;    for (var type in input) {      if (input.hasOwnProperty(type)) {          item = {};          item.type = type;          item.name = input[type];          output.push(item);      }  }    // display result  document.write(JSON.stringify(output));

---

And, using some more modern functionality:

var input = {       "fruit" : ["mango","orange"],      "veg"   : ["carrot"]  };    var output = Object.keys(input).map(function(key) {     return {type: key, name: input[key]};  });    // display the result  document.write(JSON.stringify(output));

Answer 2

In a browser that supports ES5 – or where you added a shim for it:

var stuff = {      "fruit" : ["mango","orange"],     "veg"   : ["carrot"] }  var array = Object.keys(stuff).map(function(key) {     return {"type" : key, "name" : stuff[key] } }) 

See: Object.keys, Array's map

Or, in the old fashion way:

var stuff = {      "fruit" : ["mango","orange"],     "veg"   : ["carrot"] }  var array = []  for (var key in stuff) {     if (stuff.hasOwnProperty(key)) {         array.push({"type" : key, "name" : stuff[key] })     } } 

Please notice that in both cases the array's value are shared because in JS the objects are passed by reference. So, for instance, stuff["fruit"] and array[0].name points to the same reference of the array ["mango", "orange"]. It means, if you change one of them, the other will be changed as well:

stuff["fruit"].push("apple"); alert(array[0].name); // "mango", "orange", "apple" 

To avoid that, you can use slice to have a one-level deep copy of your array. So in the code above, instead of:

"name" : stuff[key] 

you will have:

"name" : stuff[key].slice(0) 

Hope it helps.