Getting values out of AJAX response [duplicate]

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
– froginvasion, Commented Jan 21, 2016 at 15:03
Actually, I think stackoverflow.com/questions/45015/… 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
– John Hascall, Commented Jan 21, 2016 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
– John Hascall, Commented Jan 21, 2016 at 15:07

Tushar · Accepted Answer · 2016-01-21 15:14:57Z

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

Anoop LL · Accepted Answer · 2016-01-21 14:36:05Z

1

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

answered Jan 21, 2016 at 14:36

Anoop LL

1,5752 gold badges23 silver badges36 bronze badges

Comments

John Hascall · Accepted Answer · 2016-01-21 15:12:43Z

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

Collectives™ on Stack Overflow

Getting values out of AJAX response [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related