Как добавить сложный формат JSON в HTML-таблицу

Question

Я использовал AJAX и получил ответ JSON, затем я хочу отобразить json в таблицу html как

# | TypeID | TypeDesc | CreateBy

1 | 000001 | АААААА | Адам

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

1. используйте "response.records";

   if (response && response.records) { $ .each (response.records, function (index, value) { var tableRow = ""; var row = 1; tableRow = $ (''); tableRow.append ("" + row + ""); ряд = ряд + 1; tableRow.append ("" + value.type_id + ""); tableRow.append ("" + value.type_desc + ""); tableRow.append ("" + value.type_createby + ""); . $ ( '# Настольный контейнер') добавить (TableRow); }); }

2. Пейджинг реализован по-разному в зависимости от того, какой пользовательский элемент управления таблицей используется.

Answer 2

Попробуйте поработать с Шаблонными литералами , пожалуйста, посмотрите на этот живой пример

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 3

Ваш код выглядит следующим образом. Вам нужно выполнить итерацию response.records и получить доступ к значению объекта, например value.type_id, а не по индексу в $.each loop

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 4

Как зациклить, чтобы показать 5 строк и получить подкачку с помощью javascript?

Если вам нужно добавить расширенные элементы управления взаимодействием в ваши HTML-таблицы, взгляните на таблицы данных https://datatables.net/examples/data_sources/ajax.html

Answer 5

Вы перебираете 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>