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?

• Blazemonger: jsfiddle.net/2WNWg -- seems to work here.
• Francis Avila: Is the name of your table really #__cameras? Is the query itself correct? Could some unescaped stuff have gotten in through $user->id?
• Tom: 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.

Answer 1

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?

• Tom: Uh oh, thx. Now I'm not sure where to look. It is odd that removing the loops removes the a is null error.
• Kevin B: What line does the error occur on? In what .js file? What version of jQuery?
• Tom: <script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">. I get a is null in firebug: jquery.min.js (line 2)
• Kevin B: Can you load up the non-minified version? (remove .min)
• Tom: I should also note that this is in Joomla, so just in case I've put in jQuery.noConflict() just in case.

Answer 2

Your code works fine:

http://jsfiddle.net/QSvNy/

So the error is not there.

Answer 3

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');

• Tom: 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.