How to convert JSON object to JavaScript array?

JavascriptJson

Javascript Problem Overview


I need to convert JSON object string to a JavaScript array.

This my JSON object:

{"2013-01-21":1,"2013-01-22":7}

And I want to have:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
   
data.addRows([
    ['2013-01-21', 1],
    ['2013-01-22', 7]
]);

How can I achieve this?

Javascript Solutions


Solution 1 - Javascript

var json_data = {"2013-01-21":1,"2013-01-22":7};
var result = [];

for(var i in json_data)
    result.push([i, json_data [i]]);


var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(result);

http://jsfiddle.net/MV5rj/

Solution 2 - Javascript

If you have a well-formed JSON string, you should be able to do

var as = JSON.parse(jstring);

I do this all the time when transfering arrays through AJAX.

Solution 3 - Javascript

Suppose you have:

var j = {0: "1", 1: "2", 2: "3", 3: "4"};

You could get the values with (supported in practically all browser versions):

Object.keys(j).map(function(_) { return j[_]; })

or simply:

Object.values(j)

Output:

["1", "2", "3", "4"]

Solution 4 - Javascript

function json2array(json){
	var result = [];
	var keys = Object.keys(json);
	keys.forEach(function(key){
		result.push(json[key]);
	});
	return result;
}

See this complete explanation: http://book.mixu.net/node/ch5.html

Solution 5 - Javascript

This will solve the problem:

const json_data = {"2013-01-21":1,"2013-01-22":7};

const arr = Object.keys(json_data).map((key) => [key, json_data[key]]);

console.log(arr);

Or using Object.entries() method:

console.log(Object.entries(json_data));

In both the cases, output will be:

/* output: 
[['2013-01-21', 1], ['2013-01-22', 7]]
*/

The above solutions do not work for nested objects. For nested objects, we can do something like this:

const isObject = (obj) => {
  return typeof obj === 'object' && !Array.isArray(obj) && obj !== null;
}

const objToArray = (obj) => {
  return Object.keys(obj).map((key) => {
    return [
      key, isObject(obj[key]) ? 
        objToArray(obj[key]) :
        obj[key]
    ];
  });    
}

const json_data = {
  "2013-01-21":1, 
  "2013-01-22":7,
  "ab":{"x":{"xa": 3, "xb": 4}, "y": 2},
};

console.log(JSON.stringify(objToArray(json_data)));

The output in this case will be:

/* output: 
[["2013-01-21",1],["2013-01-22",7],["ab",[["x",[["xa",3],["xb",4]]],["y",2]]]]
*/

Solution 6 - Javascript

You can insert object items to an array as this

 let obj2 = {"2013-01-21":1,"2013-01-22":7}
 
 console.log(Object.keys(obj2).map(key => [key, obj2[key]]))

let obj = {
  '1st': {
    name: 'stackoverflow'
  },
  '2nd': {
    name: 'stackexchange'
  }
};

// you can use Object.values(obj)
console.log(Object.values(obj))
 
// or you can use this instead. 
 let wholeArray = Object.keys(obj).map(key => obj[key]);

 
 console.log(wholeArray);
 console.log(Object.values(obj));

Solution 7 - Javascript

if the goal is to create an array of objects, here is a solution that will accomplish what you're trying to do using Object.keys():

const jsonResponse = '{"2013-01-21":1,"2013-01-22":7}'
// Only use json parse if the data is a JSON string.
const obj = typeof jsonResponse === 'string' ? JSON.parse(jsonResponse) : jsonResponse;
const data = [];

Object.keys(obj).forEach((key) => data.push({[key]: obj[key]}))
// Example 2 - storing it directly in a variable using map
const arrayOfObjs = Object.keys(obj).map((key) => ({[key]: obj[key]}))

Or using Object.entries()

// Example 1
Object.entries(obj).forEach((array) => data.push({[array[0]]: array[1]}))
// Example 2
Object.entries(obj).forEach(([key, value]) => data.push({[key]: value}))
// Example 3 - Store it directly in a new variable using map
const arrayOfObjs = Object.entries(obj).map(([key, value]) => ({[key]: value}))

Solution 8 - Javascript

Consider having a json object we want to convert

const my_object = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

There is several solution you can use :

1. Object.keys() and Object.values()

Theses functions convert any object to an array. One returns an array with all the keys, and the other all the values :

console.log(Object.keys(my_object))
// Output : ["key1", "key2", "key3"]

console.log(Object.values(my_object))
// Output : ["value1", "value2", "value3"]

I'm not sure to understand the initial question, but the solution would probably be

data.addRows(Object.values(my_object));

2. Object.entries()

This function is a mix of the two above:

console.log(Object.entries(my_object))
// Output : [["key1", "value1"],  ["key2", "value2"],  ["key3", "value3"]]

It no use for the initial question, but this function is so usefull I had to mention it. Especially, when the value_ are nested object. Let say our values are objects like this :

const my_object = {
    "key1": {"a": 1, "b": 2},
    "key2": {"y": 25, "z": 26},
    "key3": {"much": "stuff"}
}

and we want to end up with an array like this

my_array = [
    {"key": "key1", "a": 1, "b": 2},
    {"key": "key2", "y": 25, "z": 26},
    {"key": "key3", "much": "stuff"}
]

We need to use Object.entries() to get all our key with their value. We will start with an overdetailed code :

my_array = Object.entries(my_object).map(function(entry){
   key = entry[0];
   value = entry[1];

   nested_object = value;
   nested_object.key = key;

   return nested_object;
});

console.log(my_array);
// Expected output : [
//    {"key": "key1", "a": 1, "b": 2},
//    {"key": "key2", "y": 25, "z": 26},
//    {"key": "key3", "much": "stuff"}
//]

We can make use of spread operator to simplify our code :

my_array = Object.entries(my_object).map(entry => {"key": entry[0], ...entry[1]});

console.log(my_array);
// Expected output : [
//    {"key": "key1", "a": 1, "b": 2},
//    {"key": "key2", "y": 25, "z": 26},
//    {"key": "key3", "much": "stuff"}
//]

Solution 9 - Javascript

Some correction to @Mister Aqua's SOLUTION

const my_array = [];
    Object.entries(set_of_objects).map(function (entry) {
      const key = entry[0];
      const value = entry[1];

      const nested_object = {};

      nested_object[key] = value;
      my_array.push(nested_object);
    });

Chill Pill :)

Solution 10 - Javascript

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Solution 11 - Javascript

As simple as this !

var json_data = {"2013-01-21":1,"2013-01-22":7};
var result = [json_data];
console.log(result);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1960311View Question on Stackoverflow
Solution 1 - JavascriptsalexchView Answer on Stackoverflow
Solution 2 - JavascriptaggatonView Answer on Stackoverflow
Solution 3 - JavascriptmvallebrView Answer on Stackoverflow
Solution 4 - JavascriptRoger Garzon NietoView Answer on Stackoverflow
Solution 5 - JavascriptRakesh SharmaView Answer on Stackoverflow
Solution 6 - JavascriptNuOneView Answer on Stackoverflow
Solution 7 - JavascriptDylan PremView Answer on Stackoverflow
Solution 8 - JavascriptMister AquaView Answer on Stackoverflow
Solution 9 - JavascriptAli AkramView Answer on Stackoverflow
Solution 10 - Javascriptyassine menssiView Answer on Stackoverflow
Solution 11 - JavascriptCCCView Answer on Stackoverflow