Question

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

＃| TypeID | TypeDesc | CreateBy

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获取分页？

Answer 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>

Answer 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);
     // });
 //},

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

Answer 3

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

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

Answer 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);

<div id="app"></div>

Answer 5

使用“ response.records”；

如果（响应&& response.records）{ $ .each（response.records，function（index，value）{ var tableRow =“”; var row = 1; tableRow = $（''）; tableRow.append（“” +行+“”）; 行=行+ 1; tableRow.append（“” + value.type_id +“”）; tableRow.append（“” + value.type_desc +“”）; tableRow.append（“” + value.type_createby +“”）; $（'＃table-container'）。append（tableRow）; }）; }
分页的实现方式有所不同，具体取决于所使用的自定义表控件。

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

5 个答案: