如何将json复杂格式添加到html表中答案

【问题标题】：How to add json complex format to html table如何将json复杂格式添加到html表中
【发布时间】：2018-09-11 13:19:44
【问题描述】：

我使用 AJAX 并获得 JSON 响应，然后我想将 json 映射到表 html 喜欢

# |类型ID |类型描述 |创建者

1 | 000001 | AAAAAA |亚当

2 | 000002 | BBBBBB |詹姆斯

这是我的json

{
    "records": [{
        "type_id": 000001,
        "type_desc": "AAAAAA ",
        "type_createby": "Adam"
    }, {
        "type_id": 000002,
        "type_desc": "BBBBBB",
        "type_createby": "James"
    }, {
        "type_id": 000003,
        "type_desc": "CCCCCC",
        "type_createby": "Sam"
    }]
}

这是我正在尝试的

success: function (response) {
    $('#table-container').html("");

    $.each(response, function (index) {
        var tableRow = "";
        var row = 1;
        tableRow = $('<tr/>');
        tableRow.append("<td>" + row + "</td>");
        row = row + 1;
        tableRow.append("<td>" + response[index].type_id + "</td>");
        tableRow.append("<td>" + response[index].type_desc + "</td>");
        tableRow.append("<td>" + response[index].type_createby + "</td>");

        $('#table-container').append(tableRow);
    });
},

我的显示器显示了表格，但数据仍然显示“未定义”。我有两个问题。

1.如何定义正确的数据？

2.如何循环显示5行并使用javascript进行分页？

【问题讨论】：

确保 response 是一个对象，而不是 JSON 字符串，然后遍历 response.records 而不是 response。然后只需检查index 是否大于四，在这种情况下从each 的回调中返回false。请注意，如果您希望它继续计数，则需要在 each 的回调之外声明 row。

标签： javascript jquery html json ajax

【解决方案1】：

您正在迭代不是数组的response。遍历response.records 而不是response。

 success: function(response){
                 $('#table-container').html("");
                 $.each (response.records , function (index,record) {
                     var tableRow = "";
                     var row = 1 ;
                     tableRow = $('<tr/>');
                     tableRow.append("<td>" + row + "</td>");
                     row = row + 1 ;
                     tableRow.append("<td>" + record.type_id + "</td>");
                     tableRow.append("<td>" + record.type_desc + "</td>");
                     tableRow.append("<td>" + record.type_createby + "</td>");
                     $('#table-container').append(tableRow);
           });
     },

工作片段：

var response = {
 "records": [{
  "type_id": 000001,
  "type_desc": "AAAAAA ",
  "type_createby": "Adam"
 }, {
  "type_id": 000002,
  "type_desc": "BBBBBB",
  "type_createby": "James"
 }, {
  "type_id": 000003,
  "type_desc": "CCCCCC",
  "type_createby": "Sam"
 }]
}

$('#table-container').html("");
  $.each (response.records , function (index,record) {
 var tableRow = "";
 var row = 1 ;
tableRow = $('<tr/>');
tableRow.append("<td>" + row + "</td>");
row = row + 1 ;
tableRow.append("<td>" + record.type_id + "</td>");
tableRow.append("<td>" + record.type_desc + "</td>");
tableRow.append("<td>" + record.type_createby + "</td>");
$('#table-container').append(tableRow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-container"></table>

【讨论】：

谢谢！！我稍微修改了一下代码，但这很有帮助。

【解决方案2】：

您的代码如下所示。您需要迭代 response.records 并且您需要访问像 value.type_id 这样的对象的值，而不是通过 $.each 循环中的索引

var response = {
 "records": [{
  "type_id": 000001,
  "type_desc": "AAAAAA ",
  "type_createby": "Adam"
 }, {
  "type_id": 000002,
  "type_desc": "BBBBBB",
  "type_createby": "James"
 }, {
  "type_id": 000003,
  "type_desc": "CCCCCC",
  "type_createby": "Sam"
 }]
}

       $.each(response.records, function(value){
        console.log(`Type ID: ${value.type_id}`)
        console.log(`Type Desc: ${value.type_desc}`)
        console.log(`Type Created By: ${value.type_createby}`)

       });
     //success: function(response){
     //        $('#table-container').html("");
     //        $.each (response.records, function (value) {
     //            var tableRow = "";
     //            var row = 1 ;
     //            tableRow = $('<tr/>');
     //            tableRow.append("<td>" + row + "</td>");
     //            row = row + 1 ;
     //            tableRow.append("<td>" + value.type_id + "</td>");
     //           tableRow.append("<td>" + value.type_desc + "</td>");
     //            tableRow.append("<td>" + value.type_createby + "</td>");
     //            $('#table-container').append(tableRow);
     // });
 //},

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

如何循环显示 5 行并使用 javascript 进行分页？

如果您需要添加高级交互控件到您的 HTML 表中，查看数据表 https://datatables.net/examples/data_sources/ajax.html

【讨论】：

【解决方案4】：

尝试使用Template literals，请查看此示例

const dataset = {
        "records": [{
            "type_id": 000001,
            "type_desc": "AAAAAA ",
            "type_createby": "Adam"
        }, {
            "type_id": 000002,
            "type_desc": "BBBBBB",
            "type_createby": "James"
        }, {
            "type_id": 000003,
            "type_desc": "CCCCCC",
            "type_createby": "Sam"
        }]
    };

function getRows(records) {
    const rows = records.map((data, index) => {
        return `
            <tr>
                <td>${++index}</td>
                <td>${data.type_id}</td>
                <td>${data.type_desc}</td>
                <td>${data.type_createby}</td>
            </tr>`;
    }).join('');

    return rows;
}

function getTable(rows) {
    const table = `
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>TypeID</th>
                    <th>TypeDesc</th>
                    <th>CreateBy</th>
                </tr>
            <thead>

            <tbody>
                ${rows}
            <tbody>
        </table>`;

    return table;
}

function renderTable(dataset) {
    const rows = getRows(dataset.records);
    const table = getTable(rows);

    document.querySelector('#app').innerHTML = table;
}

renderTable(dataset);

&lt;div id="app"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

使用“response.records”；

if (response && response.records) { $.each(response.records, function (index, value) { var tableRow = ""; 变量行 = 1; 表行 = $(''); tableRow.append("" + row + ""); 行 = 行 + 1； tableRow.append("" + value.type_id + ""); tableRow.append("" + value.type_desc + ""); tableRow.append("" + value.type_createby + ""); $('#table-container').append(tableRow); }); }
根据使用的自定义表格控件，分页实现方式不同。

【讨论】：