从 AJAX 响应中获取值 [重复]答案

【问题标题】：Getting values out of AJAX response [duplicate]从 AJAX 响应中获取值 [重复]
【发布时间】：2016-04-27 20:27:54
【问题描述】：

我收到这样的回复

[
  {
    "id": "958315db-ca46-4b32-ad89-f0564a2bfa37",
    "name": "XXXX",
    "device_count": 3,
    "gateway_count": 2,
    "longitude": -109.207929275995,
    "latitude": 33.1906871835467
  },
  {
    "id": "4485e5ee-ba30-4103-8f24-c710efed3929",
    "name": "YYYY",
    "device_count": 0,
    "gateway_count": 0,
    "longitude": null,
    "latitude": null
  }
]

如何在 JavaScript 中解析它并在一个数组中获取两个 id 和名称？抱歉，我是 JavaScript 新手

【问题讨论】：

var ids = JSON.parse(response).map(e => e.id);
@Tushar 您可能想使用 ES5 语法；如果您不知道速记语法，可能会感到困惑。
实际上，我认为stackoverflow.com/questions/45015/… 是“规范”的答案。但是，这两个答案都存在问题，因为它们几乎都是“使用JSON.parse”，而没有关于如何访问结果的更多信息。
@Tushar 的答案只回答了原始问题的一半，因为它只得到了 'id' 而不是 'name'。

标签： javascript

【解决方案1】：

因为你有 JSON 的 string 表示。要将其转换为 JSON 对象，您可以使用 JSON.parse()。

要从数组中的每个对象中获取id 字段，您可以使用Array#map，这里显示的是在 ES6 中使用Arrow function。

JSON.parse(response).map(e => ({
    id: e.id,
    name: e.name
}));

var response = '[ { "id": "958315db-ca46-4b32-ad89-f0564a2bfa37", "name": "XXXX", "device_count": 3, "gateway_count": 2, "longitude": -109.207929275995, "latitude": 33.1906871835467 }, { "id": "4485e5ee-ba30-4103-8f24-c710efed3929", "name": "YYYY", "device_count": 0, "gateway_count": 0, "longitude": null, "latitude": null } ]';

var ids = JSON.parse(response).map(e => ({
    id: e.id,
    name: e.name
}));

console.log(ids);
document.body.innerHTML = '<pre>' + JSON.stringify(ids, 0, 4) + '</pre>'; // For DEMO purpose

在 ES5 中可以使用匿名函数编写相同的代码。

JSON.parse(response).map(function (obj) {
    return {
        id: obj.id,
        name: obj.name
    };
});

var response = '[ { "id": "958315db-ca46-4b32-ad89-f0564a2bfa37", "name": "XXXX", "device_count": 3, "gateway_count": 2, "longitude": -109.207929275995, "latitude": 33.1906871835467 }, { "id": "4485e5ee-ba30-4103-8f24-c710efed3929", "name": "YYYY", "device_count": 0, "gateway_count": 0, "longitude": null, "latitude": null } ]';

var ids = JSON.parse(response).map(function (obj) {
    return {
        id: obj.id,
        name: obj.name
    };
});
console.log(ids);
document.body.innerHTML = '<pre>' + JSON.stringify(ids, 0, 4) + '</pre>'; // For DEMO purpose

【讨论】：

【解决方案2】：

假设您在数据变量上获取此 json

 var data = [ { "id": "958315db-ca46-4b32-ad89-f0564a2bfa37", "name": "XXXX", "device_count": 3, "gateway_count": 2, "longitude": -109.207929275995, "latitude": 33.1906871835467 }, { "id": "4485e5ee-ba30-4103-8f24-c710efed3929", "name": "YYYY", "device_count": 0, "gateway_count": 0, "longitude": null, "latitude": null } ]

您可以轻松访问第一个元素的data[0].id id。 data.length 会给你对象的总数，以便你可以迭代

【讨论】：

【解决方案3】：

您可以使用JSON.parse() 将字符串转换为“等效”JavaScript 对象。更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

在你的情况下，你可以这样做：

var obj = JSON.parse(response);         // an array in your case
var ids = obj.map(e => e.id);
var names = obj.map(e => e.name);

.map() 调用使用新的“胖箭头”运算符。这种几乎等效的语法可能更熟悉：

var ids = obj.map( function(e) { return e.id; } );

数组映射函数信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

关于 [Fat] 箭头函数的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：