Question

我得到了这个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>');

                    });
                });
            }

那么如何在jQuery代码中将vendor.contacts添加为嵌套表？我知道我的代码不干净，与Java相比，jquery让我感到困惑

Answer 1

不确定您是否希望将该表放在供应商的单元格中，但尝试这样的事情......

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。一直无法测试，但如果您收到错误，请告诉我。

Answer 2

除非您对页面发送的数量有多大限制（即每一K数据对您不利），否则我认为jQuery不适合这类事情。

我想到JSON +某事=＆gt; HTML是模板化的，所以我通常使用像Handlebars这样的JavaScript模板工具来做这种事情。这是更自然的契合。此外，您现在可以尝试使用Try Handlebars.js这样的网站来交互式地制作一个模板，该模板可以获取您的一些示例JSON并输出您想要的HTML。

很可能，其中包含另一个{{#each}}的{{#each}}可能会处理嵌套JSON到您所追求的任何HTML的转换。

如何在json中读取表中的表

2 个答案: