使用JSON中的嵌套jQuery生成表

Question

我正在尝试从一些JSON数据生成一个表。

我想要得到的基本上是出版商列表，该出版商的每个作者以及每个作者的书籍详细信息。 因此，使用下面的JSON看起来像：

Publisher      |  Author     |  BookDetails
-------------------------------------
Random House   |  John Smith |  Provided, 3, fiction
Penguin        |  William S  |  Not Provided, 5, fiction

出版商将有不止一位作者，而一位作者可能有不止一本书详细信息，在这种情况下，它看起来像：

Publisher      |  Author        |  BookDetails
-------------------------------------
Random House   | John Smith     | Provided, 3, fiction
               |                | Another, John Smith Book
Penguin        | William S      | Not Provided, 5, fiction
               | Another Author | Another Authors details
               |                | Second book by another author

我的JSON看起来像：

 JSONCollection = {
                       "genres": [{
                           "genre": "Horror",
                               "publishers": [{
                               "publisherName": "Random House",
                                   "authors": [{
                                   "authorName": "John Smith",
                                       "bookDetails": [{
                                       "Blurb": "Provided",
                                           "Review": 3,
                                           "Type": "Fiction"
                                   }]
                               }]
                           }]
                       }, {
                           "genre": "Romance",
                               "publishers": [{
                               "publisherName": "Penguin",
                                   "authors": [{
                                   "authorName": "William Shakespeare",
                                       "bookDetails": [{
                                       "Blurb": "Not Provided",
                                           "Review": 5,
                                           "Type": "Fiction"
                                   }]
                               }]
                           }]
                       }]
                   }

我正在使用的代码（只是为了使发布者/作者能够正常工作）是：

  var table = $('#dataTable')
           var table_thead = table.find('thead')
           table_thead.empty()
           var tr_head = $('<tr>')
               .append($('<th>').text('publishers'))
               .appendTo(table_thead)
           var table_tbody = table.find('tbody')
           table_tbody.empty()
           var tr_body = $('<tr>')
           for (var i = 0; i < JSONCollection.genres.length; i++) {
               for (j = 0; j < JSONCollection.genres[i].publishers.length; j++) {
                   tr_body.append($('<td />').text(this.publisherName))
                       .appendTo(table_tbody)
                   for (k = 0; k < JSONCollection.genres[i].publishers[j].authors.length; k++) {
                       tr_body.append($('<td />').text(this.authorName))
                           .appendTo(table_tbody)
                   }
               }
           }

但这似乎不起作用，生成了Publisher标头，然后此后什么也没有，我在控制台中没有收到任何错误。 任何想法，我要去哪里错了？

这是一个小提琴： http : //jsfiddle.net/hE52x/

谢谢

Answer 1

我想你需要的是这个小提琴

var table = $('#dataTable');
var table_thead = $('#dataTable thead');
var table_tbody = $('#dataTable tbody');
var buffer="";
table_thead.html('<th>publishers</th><th>Authors</th>');

for (var i = 0; i < JSONCollection.genres.length; i++) {
    buffer+='<tr>';
    for (j = 0; j < JSONCollection.genres[i].publishers.length; j++) {
        buffer+='<td>'+JSONCollection.genres[i].publishers[j].publisherName+'</td>';
        buffer+='<td>';
        for (k = 0; k < JSONCollection.genres[i].publishers[j].authors.length; k++) {
            buffer+=(k==0?'':', ')+JSONCollection.genres[i].publishers[j].authors[k].authorName;
        }
        buffer+='</td>';
    }
    buffer+='</tr>';

}
table_tbody.html(buffer);

Answer 2

我在这里修改了小提琴

在小提琴中替换

this.publisherName与JSONCollection.genres[i].publishers[j].publisherName

Answer 3

相反，我使用$.each()来做到这一点：

$.each(JSONCollection.genres, function (i, item) {
    $.each(item.publishers, function (i, item) {
        tr_body.append($('<td />').text(item.publisherName)).appendTo(table_tbody);
        $.each(item.authors, function (i, item) {
            tr_body.append($('<td />').text(item.authorName)).appendTo(table_tbody);                           
        });
    });
});

演示版

---

附带说明：

一个表只能将<thead>, <tbody>作为直接子级。 正确的标记应如下所示：

<h2>Books</h2> <!--This should not be a direct child of table-->

<table id="dataTable">
  <thead></thead>
  <tbody></tbody>
</table>

Answer 4

在这里，我对您的代码进行了一些调整

jQuery代码：

                JSONCollection = {
                   "genres": [{
                       "genre": "Horror",
                           "publishers": [{
                           "publisherName": "Random House",
                               "authors": [{
                               "authorName": "John Smith",
                                   "bookDetails": [{
                                   "Blurb": "Provided",
                                       "Review": 3,
                                       "Type": "Fiction"
                               }]
                           }]
                       }]
                   }, {
                       "genre": "Romance",
                           "publishers": [{
                           "publisherName": "Penguin",
                               "authors": [{
                               "authorName": "William Shakespeare",
                                   "bookDetails": [{
                                   "Blurb": "Not Provided",
                                       "Review": 5,
                                       "Type": "Fiction"
                               }]
                           }]
                       }]
                   }]
               }

               var table = $('#dataTable')
                var table_thead = table.find('thead')
                table_thead.empty()
                var tr_head = $('<tr>')
                   .append($('<th>').text('Publishers'))
                   .append($('<th>').text('Author'))
                   .appendTo(table_thead)
                var table_tbody = table.find('tbody')
                table_tbody.empty()
                var tr_body = $('<tr>')
                for (var i = 0; i < JSONCollection.genres.length; i++) {
                   var tr_body = $('<tr>');
                   for (j = 0; j < JSONCollection.genres[i].publishers.length; j++) {
                       $this = JSONCollection.genres[i].publishers[j];
                       alert(JSONCollection.genres[i].publishers[j].publisherName);
                       tr_body.append($('<td />').text($this.publisherName))
                           .appendTo(table_tbody)
                       for (k = 0; k < JSONCollection.genres[i].publishers[j].authors.length; k++) {
                           $this = JSONCollection.genres[i].publishers[j].authors[k];
                           tr_body.append($('<td />').text($this.authorName))
                               .appendTo(table_tbody)
                       }
                   }
               }

现场演示：

http://jsfiddle.net/dreamweiver/hE52x/19/

快乐编码:)

Answer 5

为此，需要四个循环。 我用$.each()实现了这一点。

第一个循环浏览各种类型，第二个循环通过发行者，第三个循环通过作者，最后一个循环通过书籍详细信息。 它将照顾出版者有多于一位作者和出版者多于一本书/书名的出版商。

该表的初始HTML如下：

<table border="1" cellpadding="5" cellspacing="0" id="dataTable">
    <thead>
        <tr>
            <td>Publisher</td>
            <td>Author</td>
            <td>Book Details</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

jQuery代码非常如下：

var tbody = $('#dataTable').find('tbody'),
    tr = $('<tr/>'),
    td = $('<td/>'),
    genres = JSONCollection.genres,
    row;
$.each(genres, function(index, genre) {
    $.each(genre.publishers, function(i,publisher) {
        $.each( publisher.authors, function(j, author) {
            row = tr.clone().html( td.clone().html( publisher.publisherName ) )
            .append( td.clone().html( author.authorName ) ).append( td.clone() );
            $.each(author.bookDetails, function(l,book) {
                row.find( 'td' ).eq( 2 ).append( (l>0)?'<br>':'' )
                .append( book.Blurb + ', ' + book.Review + ', ' + book.Type );
            });
            row.appendTo( tbody );
        });
    });
});

JS FIDDLE DEMO

编辑

该演示已进行了调整，以显示该代码将如何处理多个作者和书籍。 代码略有调整。 一个CSS规则也增加了。