将 JSON 对象导出到 HTML 表的问题答案

【问题标题】：Issue on Exporting JSON Object to HTML Table将 JSON 对象导出到 HTML 表的问题
【发布时间】：2014-04-03 14:40:07
【问题描述】：

我正在尝试使用以下代码将 JSON 对象导出到 HTML 表：

JSONSelect.forEach(selecRow, options, function (queryResult) {
    var sem = $.trim(JSON.stringify(queryResult, null, ' '));
    console.log(sem);

   $.getJSON('sem', {/*somedata*/}, function(json_data){
    var table_obj = $('table');
    $.each(json_data, function(index, item){
         var table_row = $('<tr>', {id: item.id});
         var table_cell = $('<td>', {html: item.data});
         table_row.append(table_cell);
         table_obj.append(table_row);
    })
    $('body').append(table_obj);
})

请注意，JSONSelect 是一个查询 JSON 数据的插件，我已将结果存储在变量调用 sem 中。最终sem 在console.log(sem); 上看起来像这样

我尝试使用上面的$.getJSON() 方法将sem 导出到表中，但在结果/控制台上没有得到任何表甚至错误。你能告诉我我在这里做错了什么还是有更好的主意来实现这一点？

谢谢

【问题讨论】：

标签： javascript jquery ajax json getjson

【解决方案1】：

我认为您试图将$.getJSON 用于错误的事情。它的目的是从远程源检索 JSON 数据...根据您的解释，您已经在使用 JSONSelect 进行此操作。

更新根据您的小提琴，很明显您从 JSONSelect 获得的 queryResult 实际上是其中一项 - 因此您不再需要在其中执行 $.each 。你应该这样做：

JSONSelect.forEach(selecRow, options, function (queryResult) {
    var table_obj = $('#myTable'),
        table_row = $('<tr>', {id: queryResult.name}),
        table_cell = $('<td>', {html: queryResult.author});

    table_row.append(table_cell);
    table_obj.append(table_row);
    $('body').append(table_obj);
})

这是一个有效的fiddle（请注意，我替换了表格对象选择器 - 您必须对其进行调整以适合您的解决方案）。

【讨论】：

【解决方案2】：

试试这个代码：

<head>
    <script type="text/javascript">  
    $.getJSON('URL', function(json_data){
        //no need for parsejson
        //use the json_data object

        var table_obj = $('table');
        $.each(json_data, function(index, result){
             var table_row = $('<tr>', {});
             var table_cell1 = $('<td>', {html: result.firstName});//result.yourDataAttributes
             var table_cell2 = $('<td>', {html: result.lastName});
             var table_cell3 = $('<td>', {html: result.age});
             table_row.append(table_cell1,table_cell2,table_cell3);
             table_obj.append(table_row);
        })

    });
    </script>
</head>
    <body> 
    <table id=""></table> 
    </body>

【讨论】：