Getting values out of AJAX response

Question

I am getting response like this

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

How can I parse it in JavaScript and get two ids and names in an array? Sorry, I am new to JavaScript

@Tushar you might want to use ES5 syntax instead; it might be confusing if you don't know the shorthand syntax. — froginvasion, Jan 21 '16 at 15:03
Actually, I think http://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object is the "canonical" answer. However, the problem with both of those answers as they pretty much go "use `JSON.parse`" with no further information on how to access the results. — John Hascall, Jan 21 '16 at 15:06
@Tushar 's answer only answers half the original question as it only gets the 'id's and not the 'name's. — John Hascall, Jan 21 '16 at 15:07

Tushar · Answer 1 · 2016-01-21T15:14:57.260

As you've the string representation of JSON. To convert it to JSON object, you can use JSON.parse().

To get the id field from each of the object in the array, you can use Array#map here shown using Arrow function in ES6.

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

The same code can be written using anonymous function in 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

score 1 · Answer 2 · answered Jan 21 '16 at 14:36

Suppose you are getting this json on data variable

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

You can easily access the id as data[0].id of first element. data.length will give you the total number of objects so that you can iterate

score 0 · Answer 3 · answered Jan 21 '16 at 15:12

You can use JSON.parse() to turn the string into a "equivalent" JavaScript object. More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

In your case, you could do something like this:

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

The .map() calls are using the new "fat arrow" operator. This nearly-equivalent syntax may be more familiar:

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

Info on the Array map function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Info on [Fat] Arrow Functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Getting values out of AJAX response

3 Answers3