looping through mySQL json_encode with jQuery - php

Question

I'm struggling to retrieve and display results from PHP json_encode via JQuery. Any help appreciated. Here's my code php side:
$return_it = array();
$query= mysql_query("SELECT * FROM $tableName");
while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) {
$row_array[] = $row;
array_push($return_it,$row_array);
}
echo json_encode($return_it);
and on success I have this.
dataType: 'json',
success: function(data)
{
$.each(data, function() {
var name = data.name;
var values = data.values;
$('#output').append("<tr style=\"background-color:#ccc\"><td>id: </td><td> name: </td></tr><tr><td>"+name+"</td><td>"+values+"</td></tr>");
});
}
this is looping but returning undefined, I know I'm probably missing something obvious :-/

Answer 1

Your array nesting in php is unnecessary and doesn't match the way you are trying to parse the results. Just use the return_it array for each row
$return_it = array();
$query= mysql_query("SELECT * FROM $tableName");
while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) {
$return_it[] = $row;
//array_push($return_it,$row_array); /* remove */
}
echo json_encode($return_it);
The result in javascript currently would look like
[
[ {name:'foo',values:'123'} ],
[ {name:'foo2',values:'345'} ]
]
Without the extra nesting:
[
{name:'foo',values:'123'},
{name:'foo2',values:'345'}
]
This will not change the $.each parsing, rather you would need to look inside each sub array if maintain current structure.
You are however misisng critical arguments for $.each callback
$.each(data, function() {index, row){
var name = row.name;
});

Answer 2

I think it should be:
dataType: 'json',
success: function(data)
{
$.each(data, function(d) {
var name = d[0].name;
var values = d[0].values;
$('#output').append("<tr style=\"background-color:#ccc\"><td>id: </td><td> name: </td></tr><tr><td>"+name+"</td><td>"+values+"</td></tr>");
});
}
The each method applies a method to each element that is passed to the method. As it happens, you are not passing anything to function(), so you should add the parameter (in my example it is d) and manipulate d, rather than data.
As apparently you are nesting the json array (returing an array of single arrays) the d[0] part would return the attributes of the first element of your nested array, which, in your case would be your {name:"...",values:"..."}.
However, if you remove your nested JSON array as mentioned in another answer, then you don't need to add the d[0].name, and use only d.name as now each line of your JSON array is the collection of attributes, rather than an array of size 1, which would have the attributes.
Essentially you are encapsoulating your results. You should either remove the encapsoulation, or adjust the data parsing from JSON.
Hope this helps.