How to add json complex format to html table

Question

I used AJAX and get JSON response then I want to map json to table html like

# | TypeID | TypeDesc | CreateBy

1 | 000001 | AAAAAA | Adam

2 | 000002 | BBBBBB | James

This is my 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"
    }]
}

and this is I'm trying

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

My display show the table but the data still show "undefined". There are two questions I have.

1.How to define the correct data ?

2.How to loop to show 5 row and get paging with javascript ?

Answer 1

You are iterating over response that is not a array. Iterate through response.records instead of 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);
           });
     },

Working Snippet:

 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

Your code looks like following. You need to iterate response.records and you need to access value of object like value.type_id not by index in $.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 3

2. How to loop to show 5 row and get paging with javascript ?

If you need to add advanced interaction controls to your HTML tables, take a look at datatables https://datatables.net/examples/data_sources/ajax.html

Answer 4

Give a try working with Template literals , please take a look to this live example

 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

1. use " response.records ";

   if (response && response.records) { $.each(response.records, function (index, value) { var tableRow = ""; var row = 1; tableRow = $(''); tableRow.append("" + row + ""); row = row + 1; tableRow.append("" + value.type_id + ""); tableRow.append("" + value.type_desc + ""); tableRow.append("" + value.type_createby + ""); $('#table-container').append(tableRow); }); }

2. Paging is implemented differently depending on what custom table control is used.