Iterating and displaying JSON data with jQuery - php

Question

I have to display a set of records in a html table. I'm using PHP and jQuery for this.
This is my result set which is retrieved using json_encode()
This is the output of beta.php
[{"StuId":"1","fName":"Saman","lName":"Kumara","age":"14","grade":"A"},{"StuId":"2","fName":"Marry","lName":"Vass","age":"12","grade":"B"},{"StuId":"3","fName":"Navjoth","lName":"Bogal","age":"32","grade":"A"},{"StuId":"4","fName":"Jassu","lName":"Singh","age":"22","grade":"E"}]
I'm using a print.html page as follows to print the above results in a table
$(document).ready(function(){
$getJSON('beta.php' , function(data){
$.each(data, function(){
$.each(this , function(key , value){
$("<table>").appendTo("document.body");
$("<table>").html("<tr><td>" + value.StuId + "</td><td>" + value.fName + "</td><td>" + value.lName + "</td><td>" + value.age + "</td><td>" + value.grade + "</td></tr>");
});
});
});
});
this gives an error saying $getJSON() is not defined
I would be grateful if someone could please help me.
Well when I changed the code as follows I'm able to print the first record in the record set.
But I do not understand why the $.each() wont work????
$("table").html("<tr><td>" + data[0].StuId + "</td><td>" + data[0].fName + "</td><td>" + data[0].lName + "</td><td>" + data[0].age + "</td><td>" + data[0].grade + "</td></tr>");
I tried using a for loop too but then it prints only the last row
$.getJSON('beta.php' , function(data){
$.each(data, function(key, value){
for(var x=0; x < data.length; x++){
$("table").html("<tr><td>" + data[x].StuId + "</td><td>" + data[x].fName + "</td><td>" + data[x].lName + "</td><td>" + data[x].age + "</td><td>" + data[x].grade + "</td></tr>");
$("table").appendTo("document.body");
}
});
})
Can anyone please give your opinion on this :)

Answer 1

$(document).ready(function(){
$.getJSON('beta.php' , function(data){
$.each(data, function(){
$("<table/>").appendTo("document body")
.html("<tr><td>" + this.StuId + "</td><td>" + this.fName + "</td><td>" + this.lName + "</td><td>" + this.age + "</td><td>" + this.grade + "</td></tr>");
});
});
});
In your first example, you appended a new table to the document, and then content to another new table. In your second and third try, you set the content of the first table element present in your document.
Edit: And you iterated too deep, one iteration should suffice.

Answer 2

Try with
$.getJSON("beta.php", function(data) {
var table = $("<table>").appendTo(document.body);
$.each(data, function(i, row) {
var tr = $("<tr>").appendTo(table);
$("<td>").appendTo(tr).html(row.StuId);
$("<td>").appendTo(tr).html(row.fName);
$("<td>").appendTo(tr).html(row.lName);
$("<td>").appendTo(tr).html(row.age);
});
});
Cheers