Итерация и отображение данных JSON с помощью jQuery - PullRequest
Новая
       14

Итерация и отображение данных JSON с помощью jQuery

0 голосов
/ 31 мая 2011

Я должен отобразить набор записей в HTML-таблице. Я использую PHP и JQuery для этого. Это мой набор результатов, который получается с помощью json_encode() Это вывод 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"}]

Я использую страницу print.html, как указано ниже, чтобы распечатать результаты выше в таблице 

$(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>"); 

            });
        });
    });

});

это дает ошибку, говорящую $getJSON() is not defined

Буду признателен, если кто-нибудь сможет мне помочь.

Хорошо, когда я изменил код следующим образом, я могу напечатать первую запись в наборе записей.
Но я не понимаю, почему не работает $ .each () ???? 

$("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>");


Я тоже пытался использовать цикл for, но тогда он печатает только последнюю строку 

$.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");
                }

        });
    })

Может кто-нибудь высказать свое мнение по этому поводу:)

Ответы [ 2 ]

0 голосов
/ 24 августа 2011

Попробуйте с 

  $.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);
    });
  });

Приветствия

0 голосов
/ 24 августа 2011 
$(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>");
        });
    });
});

В первом примере вы добавили новую таблицу в документ, а затем добавили содержимое в другую новую таблицу.Во второй и третьей попытке вы устанавливаете содержимое первого элемента таблицы, присутствующего в вашем документе.

Edit: И вы выполняли слишком глубокую итерацию, одной итерации должно быть достаточно.

...