Question

我正在通过一个示例来处理从php页面传递的以下json对象： -

 {"book":[{"title":"Harry Potter","author":"J K. Rowling","year":"2005","price":"29.99"},{"title":"Learning XML","author":"Erik T. Ray","year":"2003","price":"39.95"}]}

我知道您可以迭代并将所有数据打印到表中，如下所示：

$.each(data.book, function(index, book) {
                    content = '<tr><td>' + book.title + '</td>';
                    content += '<td>' + book.author + '</td>';
                    content += '<td>' + book.year + '</td>';
                    content += '<td>' + book.price + '</td></tr>';
                    $(content).appendTo("#content2");
                });

但是说json数据是动态的，遵循相同的结构，我怎样才能调整上面的代码来实现这个目的呢？我以为我需要某种嵌套循环。

导致我混淆的是，对于行$ .each（data.book，function（index，book）{ data.book并不总是data.book，它们将是data.foo 而引用book.title的行并不总是与book.bar

相同

任何最受赞赏的指导

Answer 1

是的，您可以在这样的嵌套循环中执行此操作

var content = '';
$.each(data.book, function(index, book) {
    content += '<tr>';
    $.each(book,function(k,v){
        content += '<td>' + v + '</td>';
    });
    content += '</tr>';   
});
$(content).appendTo("#content2");

http://jsfiddle.net/tjjQh/

哦..然后使用for in循环

for (v in data) {
    $.each(data[v], function(index, book) {
        content += '<tr>';
        $.each(book, function(k, v) {
            content += '<td>' + v + '</td>';
        });
        content += '</tr>';
    });
}

http://jsfiddle.net/8YCgA/

Answer 2

您可以查看jQuery Templating。

var data = [  
        { name : "John",  age : 25 },  
        { name : "Jane",  age : 49 },  
        { name : "Jim",   age : 31 },  
        { name : "Julie", age : 39 },  
        { name : "Joe",   age : 19 },  
        { name : "Jack",  age : 48 }

可以表达为：

<li>  
    <span>{%= $i + 1 %}</span>  
    <p><strong>Name: </strong> {%= name %}</p>  
    {% if ($context.options.showAge) {  %}  
        <p><strong>Age: </strong> {%= age %}</p>  
    {% } %}  
</li>

使用jquery显示动态JSON内容

2 个答案: