如何将JSON对象转换为JavaScript数组？

Question

我需要将JSON对象字符串转换成JavaScript数组。

这是我的JSON对象：

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

而我想要拥有：

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

data.addRows([
    ['2013-01-21', 1],
    ['2013-01-22', 7]
]);

我该如何实现这个目标？

- user1960311

---

作弊 -> string.split(',') - adeneo

@adeneo 他想要一个数组中嵌套数组，使用你的方法只会得到一个数组。 - salexch

如果您的数据是 AJAX 响应，请考虑使用 data.responseText 来获取核心数据。 - papesky

Answer 1

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/

- salexch

---

我想要类似这样的东西： 2013-01-21 ==> 1 2013-01-22 ==> 7 (就像哈希表一样) - user1960311

@user1960311 这就是你现在拥有的。 - Ian

Answer 2

如果您有一个格式良好的 JSON 字符串，您应该能够执行

var as = JSON.parse(jstring);

当通过 AJAX 传递数组时，我经常这样做。

- aggaton

---

+1 for JSON.parse()。目前它得到了广泛的浏览器支持：http://caniuse.com/json。 - siliconrockstar

这似乎返回一个对象，而不是数组。对吗？ - Feru

它会返回您序列化的任何对象或对象集合。 - aggaton

我认为这个答案比被接受的那个更好。 - simhumileco

很好的代码，比被接受的还要快 @aggaton - Nabeel Iqbal

Answer 3

假设你有：

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

您可以使用以下代码来获取值（在几乎所有浏览器版本中都受支持）：

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

或者简单地说：

Object.values(j)

输出：

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

- mvallebr

---

谁看到这个...使用Object.values代替！ - Nico Van Belle

请记住，Object.values() 在任何版本的IE上都不受支持。 (https://caniuse.com/?search=Object.values) - A Friend

IE不支持“任何东西”。它是否真的重要，它是兼容还是不兼容的？ - Someone

@某人，如果微软不支持IE，为什么我们中的任何人都应该支持它呢？就假装这一切都是一个噩梦吧... - WinEunuuchs2Unix

Answer 4

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

查看完整解释：http://book.mixu.net/node/ch5.html

- Roger Garzon Nieto

---

这不会保留键。 - Jake N

Answer 5

这将解决问题：

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

或者使用Object.entries()方法：

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

在这两种情况下，输出将是：

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

以上的解决方案不适用于嵌套对象。对于嵌套对象，我们可以这样做：

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

在这种情况下，输出结果为：

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

- Rakesh Sharma

---

很好，但无法处理嵌套对象。 var data = {"2013-01-21":1,"2013-01-22":7, "ab":{"x":1}}; 返回 [["2013-01-21",1],["2013-01-22",7],["ab",{"x":1}]] - MPV

使用深度优先搜索方法编辑了嵌套对象的解决方案。 - Rakesh Sharma

Answer 6

您可以像这样将对象项插入到数组中

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

- noone

---

这个 JSON 结构与问题中的不同。它不能正确处理键/值对，只会返回一个值数组。 - Dylan Prem

@DylanPrem 感谢您指出。也许作者已经编辑了问题。但无论如何，我已经修正了答案。 - noone

Answer 7

考虑有一个我们想要转换的json对象。

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

有几种解决方案可供使用：

1. Object.keys() 和 Object.values()

这些函数可以将任何对象转换为数组。一个返回包含所有键的数组，另一个返回所有值的数组：

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

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

我不确定是否理解了最初的问题，但解决方案可能是：

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

2. Object.entries()

这个函数是上面两个函数的混合体：

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

这段话的意思是：“虽然这并不适用于最初的问题，但这个函数非常有用，我不得不提一下它。特别是当'value_'是嵌套对象时。假设我们的值是像这样的对象：”

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

我们想要最后得到这样一个数组。

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

我们需要使用Object.entries()来获取所有键和它们的值。我们将从一个过于详细的代码开始：

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

我们可以利用展开运算符来简化我们的代码：

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

- Portevent

---

没有所谓的“JSON对象”或“JSON数组”。JSON是一种数据结构的文本表示（通常是对象或数组，但任何数据类型都可以编码为JSON）。因为JSON只是文本，为了处理它，必须将其解码回与用于创建JSON的等效数据结构相同的数据结构中。在您的示例中，json_object是JavaScript对象（不需要在键周围加引号），而json_array是JavaScript数组。在此响应中没有JSON的痕迹。 - axiac

当然可以。我想将json_object作为我的JSON对象。但是我会重命名它们以避免进一步的混淆。 - Portevent

Answer 8

如果目标是创建一个对象数组，使用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]}))

或者使用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}))

- Dylan Prem

Answer 9

一些对@Mister Aqua的解决方案的修正

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

放松，冷静一下 :)

- Ali Akram

Answer 10

当我将长JSON字符串放在隐藏的

中，然后尝试使用以下代码将其转换为JSON时，出现了错误：

var data = document.getElementById('data');
var json = JSON.parse(data);

发现错误了吗？ 是的，我忘记在第一行添加.innerHTML。 所以数据已经是一个对象。而不是字符串。如何使用JSON.parse解析对象？

JSON.parse用于解析字符串。而不是对象。

- MbPCM