Convert JSON array to an HTML table in jQuery

Question

Is there a really easy way I can take an array of JSON objects and turn it into an HTML table, excluding a few fields? Or am I going to have to do this manually?

Answer 1

Using jQuery will make this simpler.

The following code will take an array of arrays and store convert them into rows and cells.

$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});

You could add a check for the keys you want to exclude by adding something like

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

at the start of the getJSON callback function and adding:

if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

around the tbl_row += line.

Edit: Was assigning a null variable previously

Edit: Version based on Timmmm's injection-free contribution.

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});

Answer 2

I'm not sure if is this that you want but there is jqGrid. It can receive JSON and make a grid.

Answer 3

Make a HTML Table from a JSON array of Objects by extending $ as shown below

$.makeTable = function (mydata) {
    var table = $('<table border=1>');
    var tblHeader = "<tr>";
    for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
    tblHeader += "</tr>";
    $(tblHeader).appendTo(table);
    $.each(mydata, function (index, value) {
        var TableRow = "<tr>";
        $.each(value, function (key, val) {
            TableRow += "<td>" + val + "</td>";
        });
        TableRow += "</tr>";
        $(table).append(TableRow);
    });
    return ($(table));
};

and use as follows:

var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");

where TableCont is some div

Answer 4

Pure HTML way, not vulnerable like the others AFAIK:

// Function to create a table as a child of el.
// data must be an array of arrays (outer array is rows).
function tableCreate(el, data)
{
    var tbl  = document.createElement("table");
    tbl.style.width  = "70%";

    for (var i = 0; i < data.length; ++i)
    {
        var tr = tbl.insertRow();
        for(var j = 0; j < data[i].length; ++j)
        {
            var td = tr.insertCell();
            td.appendChild(document.createTextNode(data[i][j].toString()));
        }
    }
    el.appendChild(tbl);
}

Example usage:

$.post("/whatever", { somedata: "test" }, null, "json")
.done(function(data) {
    rows = [];
    for (var i = 0; i < data.Results.length; ++i)
    {
        cells = [];
        cells.push(data.Results[i].A);
        cells.push(data.Results[i].B);
        rows.push(cells);
    }
    tableCreate($("#results")[0], rows);
});

Answer 5

Converting a 2D JavaScript array to an HTML table

To turn a 2D JavaScript array into an HTML table, you really need but a little bit of code :

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

$('body').append(arrayToTable([
    ["John","Slegers",34],
    ["Tom","Stevens",25],
    ["An","Davies",28],
    ["Miet","Hansen",42],
    ["Eli","Morris",18]
]));

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

---

Loading a JSON file

If you want to load your 2D array from a JSON file, you'll also need a little bit of Ajax code :

$.ajax({
    type: "GET",
    url: "data.json",
    dataType: 'json',
    success: function (data) {
        $('body').append(arrayToTable(data));
    }
});

Answer 6

For very advanced JSON objects to HTML tables you can try My jQuery Solution that is based on this closed thread.

var myList=[{"name": "abc","age": 50},{"name": {"1": "piet","2": "jan","3": "klaas"},"age": "25","hobby": "watching tv"},{"name": "xyz","hobby": "programming","subtable": [{"a": "a","b": "b"},{"a": "a","b": "b"}]}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
      addTable(myList, $("#excelDataTable"));
 }

function addTable(list, appendObj) {
    var columns = addAllColumnHeaders(list, appendObj);

    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = list[i][columns[colIndex]];

            if (cellValue == null) {
                cellValue = "";
            }

            if (cellValue.constructor === Array)
            {
                $a = $('<td/>');
                row$.append($a);
                addTable(cellValue, $a);

            } else if (cellValue.constructor === Object)
            {

                var array = $.map(cellValue, function (value, index) {
                    return [value];
                });

                $a = $('<td/>');
                row$.append($a);
                addObject(array, $a);

            } else {
                row$.append($('<td/>').html(cellValue));
            }
        }
        appendObj.append(row$);
    }
}


function addObject(list, appendObj) {
    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');

        var cellValue = list[i];

        if (cellValue == null) {
            cellValue = "";
        }

        if (cellValue.constructor === Array)
        {
            $a = $('<td/>');
            row$.append($a);
            addTable(cellValue, $a);

        } else if (cellValue.constructor === Object)
        {

            var array = $.map(cellValue, function (value, index) {
                return [value];
            });

            $a = $('<td/>');
            row$.append($a);
            addObject(array, $a);

        } else {
            row$.append($('<td/>').html(cellValue));
        }
        appendObj.append(row$);
    }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(list, appendObj)
{
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < list.length; i++) {
        var rowHash = list[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    appendObj.append(headerTr$);

    return columnSet;
}

Answer 7

One simple way of doing this is:

var data = [{
  "Total": 34,
  "Version": "1.0.4",
  "Office": "New York"
}, {
  "Total": 67,
  "Version": "1.1.0",
  "Office": "Paris"
}];

drawTable(data);

function drawTable(data) {

  // Get Table headers and print
  var head = $("<tr />")
  $("#DataTable").append(head);
  for (var j = 0; j < Object.keys(data[0]).length; j++) {
    head.append($("<th>" + Object.keys(data[0])[j] + "</th>"));
  }

  // Print the content of rows in DataTable
  for (var i = 0; i < data.length; i++) {
    drawRow(data[i]);
  }

}

function drawRow(rowData) {
  var row = $("<tr />")
  $("#DataTable").append(row);
  row.append($("<td>" + rowData["Total"] + "</td>"));
  row.append($("<td>" + rowData["Version"] + "</td>"));
  row.append($("<td>" + rowData["Office"] + "</td>"));
}

table {
  border: 1px solid #666;
  width: 100%;
  text-align: center;
}

th {
  background: #f8f8f8;
  font-weight: bold;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DataTable"></table>

Answer 8

You could use a jQuery plugin that accepts JSON data to fill a table. jsonTable

Answer 9

I found a duplicate over here: Convert json data to a html table

Well, there are many plugins exists, including commercial one (Make this as commercial project?! Kinda overdone... but you can checkout over here: https://github.com/alfajango/jquery-dynatable)

This one has more fork: https://github.com/afshinm/Json-to-HTML-Table

//Example data, Object 
var objectArray = [{
    "Total": "34",
    "Version": "1.0.4",
    "Office": "New York"
}, {
    "Total": "67",
    "Version": "1.1.0",
    "Office": "Paris"
}];

//Example data, Array
var stringArray = ["New York", "Berlin", "Paris", "Marrakech", "Moscow"];

//Example data, nested Object. This data will create nested table also.
var nestedTable = [{
    key1: "val1",
    key2: "val2",
    key3: {
        tableId: "tblIdNested1",
        tableClassName: "clsNested",
        linkText: "Download",
        data: [{
            subkey1: "subval1",
            subkey2: "subval2",
            subkey3: "subval3"
        }]
    }
}];

Apply the code

//Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');

Or you might want to checkout this jQuery plugins as well: https://github.com/jongha/jquery-jsontotable

I think jongha's plugins is easier to use

<div id="jsontotable" class="jsontotable"></div>

var data = [[1, 2, 3], [1, 2, 3]];
$.jsontotable(data, { id: '#jsontotable', header: false });

Answer 10

If you accept using another jQuery dependent tool, I would recommend using Tabulator. Then you will not need to write HTML or any other DOM generating code, while maintaining great flexibility regarding the formatting and processing of the table data.

For another working example using Node, you can look at the MMM-Tabulator demo project.

Answer 11

with pure jquery:

window.jQuery.ajax({
    type: "POST",
    url: ajaxUrl,
    contentType: 'application/json',
    success: function (data) {

        var odd_even = false;
        var response = JSON.parse(data);

        var head = "<thead class='thead-inverse'><tr>";
        $.each(response[0], function (k, v) {
            head = head + "<th scope='row'>" + k.toString() + "</th>";
        })
        head = head + "</thead></tr>";
        $(table).append(head);//append header
       var body="<tbody><tr>";
        $.each(response, function () {
            body=body+"<tr>";
            $.each(this, function (k, v) {
                body=body +"<td>"+v.toString()+"</td>";                                        
            }) 
            body=body+"</tr>";               
        })
        body=body +"</tbody>";
        $(table).append(body);//append body
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responsetext);
    }
});

Answer 12

You can do this pretty easily with Javascript+Jquery as below. If you want to exclude some column, just write an if statement inside the for loops to skip those columns. Hope this helps!

//Sample JSON 2D array
var json = [{
  "Total": "34",
  "Version": "1.0.4",
  "Office": "New York"
}, {
  "Total": "67",
  "Version": "1.1.0",
  "Office": "Paris"
}];

// Get Table headers and print
for (var k = 0; k < Object.keys(json[0]).length; k++) {
  $('#table_head').append('<td>' + Object.keys(json[0])[k] + '</td>');
}

// Get table body and print
for (var i = 0; i < Object.keys(json).length; i++) {
  $('#table_content').append('<tr>');
  for (var j = 0; j < Object.keys(json[0]).length; j++) {
    $('#table_content').append('<td>' + json[i][Object.keys(json[0])[j]] + '</td>');
  }
  $('#table_content').append('</tr>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr id="table_head">

    </tr>
  </thead>
  <tbody id="table_content">

  </tbody>
</table>

Answer 13

Modified a bit code of @Dr.sai 's code. Hope this will be useful.

(function ($) {
    /**
     * data - array of record
     * hidecolumns, array of fields to hide
     * usage : $("selector").generateTable(json, ['field1', 'field5']);
     */
    'use strict';
    $.fn.generateTable = function (data, hidecolumns) {
        if ($.isArray(data) === false) {
            console.log('Invalid Data');
            return;
        }
        var container = $(this),
            table = $('<table>'),
            tableHead = $('<thead>'),       
            tableBody = $('<tbody>'),       
            tblHeaderRow = $('<tr>');       

        $.each(data, function (index, value) {
            var tableRow = $('<tr>').addClass(index%2 === 0 ? 'even' : 'odd');      
            $.each(value, function (key, val) {
                if (index == 0 && $.inArray(key, hidecolumns) <= -1 ) { 
                    var theaddata = $('<th>').text(key);
                    tblHeaderRow.append(theaddata); 
                }
                if ($.inArray(key, hidecolumns) <= -1 ) { 
                    var tbodydata = $('<td>').text(val);
                    tableRow.append(tbodydata);     
                }
            });
            $(tableBody).append(tableRow);  
        });
        $(tblHeaderRow).appendTo(tableHead);
        tableHead.appendTo(table);      
        tableBody.appendTo(table);
        $(this).append(table);    
        return this;
    };
})(jQuery);

Hoping this will be helpful to hide some columns too. Link to file

Answer 14

Pivoted single-row view with headers on the left based on @Dr.sai's answer above.

Injection prevented by jQuery's .text method

$.makeTable = function (mydata) {
    var table = $('<table>');
    $.each(mydata, function (index, value) {
        // console.log('index '+index+' value '+value);
        $(table).append($('<tr>'));
        $(table).append($('<th>').text(index));
        $(table).append($('<td>').text(value));
    });
    return ($(table));
};

Answer 15

Make a HTML Table from a JSON array of Objects by extending $ as shown below

$.makeTable = function (mydata, cssClass) {
    if (!cssClass) cssClass = "table table-bordered table-stripped table-dark"
    var table = $('<table class="' + cssClass + '">');
    var tblHeader = "<thead><tr>";
    for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
    tblHeader += "</tr></thead>";
    $(tblHeader).appendTo(table);
    var TableRow = "<tbody>";
    $.each(mydata, function (index, value) {
        TableRow += "<tr id=_ID_>".replace("_ID_", value.name);
        $.each(value, function (key, val) {
            TableRow += "<td>" + val + "</td>";
        });
        TableRow += "</tr>";
    });
    TableRow += "</tbody>";
    $(table).append(TableRow);
    return ($(table));
};

Usage as Below

var EmployeeArr = [];
for (let i = 0; i < 100; ++i) {
    let emp = {};
    emp.name = "Varsha_" + i;
    emp.age = Math.round((Math.random() * 100 + 10)) * 3
    EmployeeArr.push(emp);
}
var table = $.makeTable(EmployeeArr );
$(table).appendTo("#TableCont");

where TableCont is some div

Answer 16

A still shorter way

$.makeTable = function (mydata) {
            if (mydata.length <= 0) return "";
           return $('<table border=1>').append("<tr>" + $.map(mydata[0], function (val, key) {
                return "<th>" + key + "</th>";
            }).join("\n") + "</tr>").append($.map(mydata, function (index, value) {
                return "<tr>" + $.map(index, function (val, key) {
                    return "<td>" + val + "</td>";
                }).join("\n") + "</tr>";
            }).join("\n"));
        };