Parse through multiple json responses to get the id value of each response

Question

I am making an AJAX call that receives multiple responses from the server in a json response. I want to get the id value of each response. Here is a sample of the response from the server:

{
 "success": true,
 "warnings": [],
 "errors": [],
 "requestId": "78098802gdu8",
 "result": [{ * * * "id": 1536 * * * , "name": "test\n ", "description": null, "createdAt": "2015-09-23T18:44:46Z+0000", "updatedAt": "2015-09-23T18:44:46Z+0000", "url": "https://some.name.com/"
 }]

I can get the id from a single response, but i am not having much success getting the ids from multiple responses, for instance:

{
"success": true,
"warnings": [],
"errors": [],
"requestId": "78098802gdu8",
"result": [
  { * * * "id": 1536 * * * , "name": "test\n ", "description": null, "createdAt": "2015-09-23T18:44:46Z+0000", "updatedAt": "2015-09-23T18:44:46Z+0000", "url": "https://some.name.com/"}] 
 {
  "success": true,
  "warnings": [],
  "errors": [],
  "requestId": "78098802gdu8",
   "result": [{ * * * "id": 1537 * * * , "name": "test\n ", "description": null, "createdAt": "2015-09-23T18:44:46Z+0000", "updatedAt": "2015-09-23T18:44:46Z+0000", "url": "//some.name.com/"}] 
   {
                "success": true,
                "warnings": [],
                "errors": [],
                "requestId": "78098802gdu8",
                "result": [{ * * * "id": 1538 * * * , "name": "test\n ", "description": null, "createdAt": "2015-09-23T18:44:46Z+0000", "updatedAt": "2015-09-23T18:44:46Z+0000", "url": "//some.name.com/"}]
   }
 }

}

Also, once I get the ids , i want to display them in a div. Thanks in advance for the help!

Here is the code im using to get id from one response:

$.ajax({
  type: "POST",
  url: "somefile.php",
  data: {
    EmailName: Names,
    Type: EmailType
  },
  success: function (results) {
    var json = $.parseJSON(results);
    $('textarea').val(JSON.stringify(json.result[0].id));
  }
});

Answer 1

Reframe your question. You want to translate an array of one type - containing objects with one type of structure (containing an id) - into another - an array of only ids.

Then the answer is clear. The Javascript array type has the map operation which allows you to perform this translation. You only need to provide a function that can turn the structure containing the id into the id only.

See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Update your value, don't overwrite it on each callback

Here is a unit test showing how your success callback should update your textarea by appending the ids to the current value.

 /* FUNCTION THAT MAKES AJAX REQUEST */ function doAsyncThing() { $.ajax({ type: "POST", url: "somefile.php", // data: {…}, success: function (results) { var json = $.parseJSON(results), id = json.result[0].id, val = $('textarea').val(); $('textarea').val(val + ' ' + id); } }); } /* BEGIN UNIT TEST */ // CREATE CLOSURE TO RETURN DUMMY FUNCTION AND FAKE RESPONSE function ajax_response(response) { return function (params) { params.success(response); }; } var n = prompt("Number of AJAX calls to make", 10); for (var i = 1; i <= n; ++i) { // OVERRIDE $.ajax WITH DUMMY FUNCTION AND FAKE RESPONSE $.ajax = ajax_response('{ "result": [{ "id": ' + i + ' }] }'); doAsyncThing(); } /* END UNIT TEST */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea>IDs:</textarea>