如何從窩JSON

讀表withing表我得到了它的結構與此類似此JSON對象：如何從窩JSON

vendor have name, phone, fax, contacts 
contacts have firstName, lastName, title, phone, email

我已經創建了表的第一級，但是我沒有如何創建第二嵌套層次

function getData(vType) { 
       $.getJSON('/LocalApp/VendorController', { 
        vendorType : vType, 
        time : "2pm" 
       }, function(vendorsJson) { 
        $('#vendors').find("tr:gt(0)").remove(); 

        var vendorTable = $('#vendors'); 

        $.each(vendorsJson, function(index, vendor) { 
         $('<tr>').appendTo(vendorTable).append(
           $('<td>').text(vendor.name)).append(
           $('<td>').text(vendor.phone)).append(
           $('<td>').text(vendor.fax)).append(
           '<table class="contactTable"><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>Phone</th><th>E-Mail</th></tr></table>'); 

        }); 
       }); 
      }

所以，我怎麼可以添加vendor.contacts在jQuery代碼嵌套表？我知道我的代碼是不是乾淨的，如果你想在供應商或不是一個單元格的表格，但嘗試這樣的事情jQuery是混亂相比，我對Java

來源

2012-07-18 skystar7

這完全不清楚你有什麼輸入或你想要輸出什麼。你能澄清嗎？ – 2012-07-18 20:14:24

有嵌套的json對象需要將其視爲一個表來查看，第一個表的最後一列有一個嵌套表。供應商有：姓名，電話，傳真，聯繫人* 聯繫人有：名字，姓氏，標題，電話，電子郵件 – skystar7 2012-07-18 20:17:13

哦，那很簡單。只需編寫一些代碼。 – 2012-07-18 20:18:03

不知道......

var contactTableHtml = '<table class="contactTable"><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>Phone</th><th>E-Mail</th></tr></table>'; 

var vendorTableContent = $.map(vendorsJson,function (index, vendor) { 

    var contactTableContentHtml = $.map(vendor.contacts,function (index, contact) { 
     return "<tr><td>" + contact.firstName + "</td><td>" + contact.lastName + "</td><td>" + contact.title + "</td><td>" + contact.phone + "</td><td>" + contact.email + "</td></tr>"; 
    }).join(""); 

    return '<tr>' + 
     '<td>' + vendor.name + '</td>' + 
     '<td>' + vendor.phone + '</td>' + 
     '<td>' + vendor.fax + '</td>' + 
     '<td>' + contactTableHtml + contactTableContentHtml + '</td>' + 
     '</tr>'; 

}).join(""); 

vendorTable.append(vendorTableContent);

首先我創建一個子表作爲一個字符串，然後將它添加到主表中。我也建議創建一個大的html字符串，並將其添加到DOM一次。這比每次調用$（'...'）要快得多。

PS。無法對其進行測試，但是如果出現錯誤，請告訴我。

來源

2012-07-18 20:21:09

@ Skystar3高興我的答案嗎？你會喜歡批准我的回答？ – 2012-08-20 13:07:38

除非你非常受限多大，你可以與頁面發送（也就是對你的數據計數的每一個K），我不認爲jQuery是一個非常適合這種事情。

我覺得JSON +什麼=> HTML作爲模板，所以我通常使用像Handlebars一個JavaScript模板工具做那種事。這是一個更自然的契合。此外，您現在可以使用類似Try Handlebars.js的網站來嘗試交互式製作一個模板，該模板將採用一些示例JSON並輸出您期望的HTML。

在所有的可能性中，{{#each}}另一個{{#each}}它裏面大概可以處理嵌套的JSON到任何HTML你以後的轉換。

來源

2012-07-18 20:49:55

PS我並不是說jQuery不好，我也使用它。我只是喜歡用Handlebars模板和jQuery來做它的功能。對於額外的30K，Handlebars是我使用的東西在我的頁面上多次使模板變得簡單。 – 2012-07-18 20:52:19

回答

相關問題