javascript - 使用 jQuery 创建带有 JSON 结果的分组动态行

Question

我有一个返回结果如下的 JSON 请求:

[
{"ID":"57","BookName":"Title1","AuthorID":"2" "AuthorName":"Paul"}
{"ID":"57","BookName":"Title1","AuthorID":"3" "AuthorName":"Mark"},
{"ID":"58","BookName":"Title2","AuthorID":"4" "AuthorName":"Bob"},
{"ID":"58","BookName":"Title2","AuthorID":"5" "AuthorName":"John"},
{"ID":"58","BookName":"Title2","AuthorID":"6" "AuthorName":"Chris"}
]

我想要完成的是以下 HTML 输出。为每个唯一 ID 创建一个具有唯一作者的新 div。当识别出新 ID 时，将创建一个新的表行，并将新的作者姓名作为新的 div 添加到其中。

HTML:

<tr>
    <td>ID: 57</td>
    <td>BookName: Title1</td>
</tr>
<tr>
    <td colspan="2">
        <div class="author">
            AuthorID : 2 Author Name: Paul
        </div>
        <div class="author">
            AuthorID : 3 Author Name: Mark
        </div>
    </td>
</tr>
<tr>
    <td>ID: 58</td>
    <td>BookName: Title2</td>
</tr>
<tr>
    <td colspan="2">
        <div class="author">
            AuthorID : 4 Author Name: Bob
        </div>
        <div class="author">
            AuthorID : 5 Author Name: John
        </div>
        <div class="author">
            AuthorID : 6 Author Name: Chris
        </div>
    </td>
</tr>

这是我的 jQuery 代码，里面有一些伪逻辑:

$.getJSON(fullurl, function(json) {
    var bookid = '';
    $.each(json, function(i,d) {
        if(d.ID!= bookid){
            make new book row
            bookid= d.ID
         }
        else 
            use same row to show author div
         }
     }//end foreach

有人可以帮助我了解如何执行此操作吗？

Answer 1

如果您无法在您可以使用的结构中获得 JSON 输出，则必须对其进行操作。您想要按书籍对作者进行分组。

var books = {};
$.each(json, function () {
    if (!books.hasOwnProperty(this.ID)) {
        books[this.ID] = {
            "ID": this.ID,
            "BookName": this.BookName,
            "authors": []
        };
    }
    books[this.ID].authors.push({"AuthorID": this.AuthorID, "AuthorName":
        this.AuthorName});
});

循环 books 应该相对容易，它具有所需的结构，并按照您在上面解释的那样附加表格行。

http://jsfiddle.net/rAYFZ/