Iterate over json array using jquery

Question

There have been some post with my similar problem: How do I iterate over a JSON array using jQuery/AJAX call from PHP? but not quite the same.

I'm getting and error from jquery: a is null

It is because of the code I've added to loop through the json data:

$(function () 
{
$.ajax({                                      
  url: 'ajax_dashboard/api.php',    //the script to call to get data          
  data: "",                        
  dataType: 'json',                    
  success: function(data)          
  {
        $.each(data, function() {
          $.each(this, function(k, v) {
                $('#output').append("<b>key: </b>"+k+"<b> value: </b>"+v)
                    .append("<hr />");
          });
        }); 
  } 
});
});

And here is the php file (which I did verify gives valid JSON format):

$query_camera_name = "SELECT camera_name, camera_status, camera_quality, email_notice, camera_hash, camera_type FROM #__cameras WHERE user_id=".$user->id." AND camera_status!='DELETED'";
$db->setQuery($query_camera_name);
//get number of cameras so we can build the table accordingly
$db->query();
$num_rows = $db->getNumRows();
// We can use array names with loadAssocList.
$result_cameras = $db->loadAssocList();
echo json_encode($result_cameras);
?>

This returns this json formatted data:

[
    {
        "camera_name": "ffgg",
        "camera_status": "DISABLED",
        "camera_quality": "MEDIUM",
        "email_notice": "DISABLED",
        "camera_hash": "0d5a57cb75608202e64b834efd6a4667a71f6dee",
        "camera_type": "WEBCAM"
    },
    {
        "camera_name": "test",
        "camera_status": "ENABLED",
        "camera_quality": "HIGH",
        "email_notice": "ENABLED",
        "camera_hash": "6ab000ef7926b4a182f0f864a0d443fc19a29fdd",
        "camera_type": "WEBCAM"
    }
]

If I remove the loops the "a is null" error is gone. What am I doing wrong?

Is the name of your table really `#__cameras`? Is the query itself correct? Could some unescaped stuff have gotten in through `$user->id`? — Francis Avila, Dec 01 '11 at 01:13
Yes, that is Joomla convention for tables. The file is fine as you can see the json output generated from that php file works fine. It must be something with the jquery ajax call that doesn't make it work. — Tom, Dec 01 '11 at 01:23

Kevin B · Accepted Answer · 2011-11-30T19:13:36.100

2

Your iteration code works just fine: http://jsfiddle.net/SuyMj/

The error is elsewhere.

Edit:

Try this to help debug.

success: function(data, textStatus, xhr) {
  console.log(xhr);
  ...
}

xhr will contain a lot of information about the request being made. What does the responseText contain? What is the statusText?

edited Nov 30 '11 at 19:13

answered Nov 30 '11 at 16:46

Kevin B

94,570
16
163
180

Uh oh, thx. Now I'm not sure where to look. It is odd that removing the loops removes the a is null error. – Tom Nov 30 '11 at 17:49
What line does the error occur on? In what .js file? What version of jQuery? – Kevin B Nov 30 '11 at 18:27
– Tom Nov 30 '11 at 18:35
Can you load up the non-minified version? (remove `.min`) – Kevin B Nov 30 '11 at 18:38
I should also note that this is in Joomla, so just in case I've put in jQuery.noConflict() just in case. – Tom Nov 30 '11 at 18:38
If I remove .min I get a new error in jquery.js (line 630) that "object is null" – Tom Nov 30 '11 at 18:39
Getting closer. Add this before the outer each `console.log(data)` and it will output `data` in the console. Does it contain the array and object structure that you gave us in your question? – Kevin B Nov 30 '11 at 18:46
That means the url you are requesting from is not returning the data that you expect it to. you can't do `$.each()` on `null` – Kevin B Nov 30 '11 at 19:03
strange because this line: echo json_encode($result_cameras); does echo the right data. Any idea then where it is going wrong? – Tom Nov 30 '11 at 19:06
Try the suggestions i added to my answer. – Kevin B Nov 30 '11 at 19:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/5473/discussion-between-kevin-b-and-tom-pepernic) – Kevin B Nov 30 '11 at 19:21

score 1 · Answer 2 · answered Nov 30 '11 at 16:47

1

Your code works fine:

http://jsfiddle.net/QSvNy/

So the error is not there.

answered Nov 30 '11 at 16:47

Nicola Peluchetti

76,206
31
145
192

score 0 · Answer 3 · answered Nov 30 '11 at 20:38

0

I don't see that you set the Content-Type of your response from php. Possibly the mime type of your response is incorrect and so jQuery does not parse the response as json.

Try this in your php before you echo your json:

header('Content-Type: application/json');

answered Nov 30 '11 at 20:38

Francis Avila

31,233
6
58
96

Thanks but that didn't help either. I did debugging with @KevinB and it must be the php code as the value is null when it gets to the jquery code. Any further insight would be appreciated. – Tom Nov 30 '11 at 20:46

Iterate over json array using jquery

3 Answers3

Linked