Ajax JSON Array - accessing the information

Question

I have the following code:

$.getJSON('../_javascripts/array.php')
    .success(function(response) { console.info(response); alert("success"); })
    .fail(function(jqXHR, status, error){ console.info(error); alert("error"); });

Which displays output within the console, however, I am trying to access that information (which is displayed within the console - it's an array) and can't seem able to.

console output

Object {P5yTZ947: Array[3], 11y6tdo8: Array[3], 66j8ttk2: Array[3], 27c7uqv0: Array[3], 44f6hvt7: Array[3]…}

I have tried the following:

alert(response);
alert(response[0]);
var array = response;

All of which bring back undefined.

Clearly I am doing something wrong but can't quite fathom what. Any advice, feedback and comments welcomed.

Instead of `console.info(response)` write `functionThatNeedsTheData(response)` and process/access it inside the function. — Felix Kling, Jul 08 '14 at 16:53
Have you tried console.log and then just playing around with it in the console? — Zhouster, Jul 08 '14 at 16:54
Updated with console output. I have tried using those options within and outside the $.getJSON. — Homer_J, Jul 08 '14 at 16:56
@Zhouster - yes, stored as global variable and then tried the above statements again and no joy. Either get [object[object] or undefined. — Homer_J, Jul 08 '14 at 16:58
Well, `response` is clearly an object, so `response[0]` will definitely return `undefined`. And since `response` doesn't exist outside of the `success` callback, you can't access it there. — Felix Kling, Jul 08 '14 at 16:58
If you are using Chrome, you can browse into the contents of your JSON data. To do that, open the Dev Tools then refresh your page. After that, Go to Network, click on the JSON request on the left then click on the Preview sub tab. — SiZiOUS, Jul 08 '14 at 17:07
@SiZiOUS - I can see it in the preview - am I missing something really obvious? Why can't I get access to the data? — Homer_J, Jul 08 '14 at 17:15
you have to access the reponse inside success function, where are you accessing it? — Ehsan Sajjad, Jul 08 '14 at 17:16
@EhsanSajjad - cheers, I have tried this but no joy, for example `.success(function(response) { console.info(response); alert("success"); alert(response);})` — Homer_J, Jul 08 '14 at 17:18
what if you do this way: ``$.getJSON('../_javascripts/array.php',function(response){ alert(response) });`` — Ehsan Sajjad, Jul 08 '14 at 17:20
@EhsanSajjad I take it this has to be done within 'success' - is it then possible to access them outside of this? — Homer_J, Jul 08 '14 at 17:47
@SiZiOUS - I have a similar output within the console but what I am struggling with is to access then later in my script. — Homer_J, Jul 08 '14 at 17:49
you have to access it inside success function make a function and call in success like: ``myfunction(response);`` — Ehsan Sajjad, Jul 08 '14 at 22:16

score 0 · Answer 1 · answered Jul 08 '14 at 18:19

0

From what the console outputs it looks like what array.php is returning is an object with arrays in it.

answered Jul 08 '14 at 18:19

Sonicdeadlock

88
2
9

Might be the case - any idea why? – Homer_J Jul 08 '14 at 18:37
If you had an associative array or an STD object in php then called json_encode() then it would most likly create what you see there – Sonicdeadlock Jul 08 '14 at 19:46

score 0 · Answer 2 · edited May 23 '17 at 11:57

Your handling of the response must be from within the callback functions given to $.getJSON();

That is, the scope of the response object in the case of success is only within the success function. Put your success handling code in there (or call it from there) and you should be good to go.

For example:

function doSomethingWithSuccessResponse( response ){
  console.log( response );

  // Execute the rest of your success case logic here
}

$.getJSON('../_javascripts/array.php')
    .success(function(response) { doSomethingWithSuccessResponse(response); })
    .fail(function(jqXHR, status, error){ console.info(error); alert("error"); });

Or, more concisely:

function doSomethingWithSuccessResponse( response ){
  console.log( response );

  // Execute the rest of your success case logic here
}

$.getJSON('../_javascripts/array.php')
    .success(doSomethingWithSuccessResponse)
    .fail(function(jqXHR, status, error){ console.info(error); alert("error"); });

Similarly for the failure case - execute your failure handling logic within the failure callback.

It looks like your API is returning an object with embedded arrays:

Object {
  P5yTZ947: Array[3], 
  11y6tdo8: Array[3], 
  66j8ttk2: Array[3], 
  27c7uqv0: Array[3], 
  44f6hvt7: Array[3]…
}

Use object-looping semantics to iterate through the object. Then use an inner loop to loop over the elements of the array:

for (var key in response) {
   if (response.hasOwnProperty(key)) {
      // key is now "P5yTZ947" or "11y6tdo8", etc
      var innerArray = response[key];

      // Loop over the values of the inner array
      for( var i = 0; i < innerArray.length; i++ ){
        console.log( innerArray[i] );  // 
      }
   }
}

It should, yes. It looks like your API is returning an object (or dictionary/hash if thats more familiar to you). Iterating through the properties of a hash is a bit different in Javascript than iterating through an array. — Brian, Jul 09 '14 at 12:33
For an object, iterate like this: `for (var key in response) { if (response.hasOwnProperty(key)) { console.log(key, response[key]); } }` http://stackoverflow.com/a/14379304/13264 — Brian, Jul 09 '14 at 12:33
@Homer_J added looping logic to the answer with a bit more explanation. — Brian, Jul 09 '14 at 12:43

score 0 · Accepted Answer · answered Jul 09 '14 at 09:39

It's difficult to answer you as we don't have any access to your array.php file. Try to debug the response output with the following code (you need to have the Developer Console opened):

$.getJSON('../_javascripts/array.php', function( data ) {
    $.each( data, function( key, value ) {
        console.log( key );
        for( var i in value ) {
            console.log( "  " + JSON.stringify(value[i]) );
        }
    });
});

Try to use breakpoints within Google Chrome console to inspect the data (Ajax response) variable contents.

Ajax JSON Array - accessing the information

3 Answers3