Iterating and displaying JSON data with jQuery

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 :)

Oh yep I have missed it.Thanks :) But still I don't get any output. The results are retrieved from the database.But it doesn't display in the html page — SriniShine
– SriniShine, Commented May 31, 2011 at 11:29

Adrian Heine · Accepted Answer · 2011-08-24 13:56:10Z

$(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.

lunohodov · Accepted Answer · 2011-08-24 14:25:43Z

0

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

answered Aug 24, 2011 at 14:25

lunohodov

5,4492 gold badges27 silver badges17 bronze badges

Collectives™ on Stack Overflow

Iterating and displaying JSON data with jQuery

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related