Convert JSON array to an HTML table in jQuery

问题:

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?

回答1:

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

回答2:

Using jQuery will make this simpler.

The following 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 cbf 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\").appendChild(tbl_body);
});

回答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

回答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);
});

回答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));
    }
});

回答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;
}

回答7:

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

回答8:

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

回答9:

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

回答10:

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

回答11:

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.

回答12:

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

回答13:

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\"));
        };