JSON配列をjQueryでHTMLテーブルに変換する


80

いくつかのフィールドを除いて、JSONオブジェクトの配列を取得してHTMLテーブルに変換する本当に簡単な方法はありますか?または、これを手動で行う必要がありますか?

回答:


37

これが必要かどうかはわかりませんが、jqGridがあります。JSONを受信して​​グリッドを作成できます。


jqGridへの別の投票-実装が非常に簡単で、優れたドキュメントと例があり、多くの作業が削減されます。
ピーターベイリー

jqGridは非常に有望に見えます!
Charlie Vieillard 2013年

3
jqGridは、自明ではないライセンスコストの商用製品であることに注意してください。
simpleuser 2018

82

jQueryを使用すると、これが簡単になります。

次のコードは、配列の配列を取得し、それらを行とセルにストア変換します。

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

次のようなものを追加することで、除外するキーのチェックを追加できます。

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

getJSONコールバック関数の開始時および追加:

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

tbl_row + =行の周り。

編集:以前はnull変数を割り当てていました

編集:Timmmm注射なしの貢献に基づくバージョン。

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

列の順序を制御するのに苦労しています
Nathan H

これを見ただけです。<tr>偶数または奇数のクラスを持つことを交互に行うように、どのように書くのでしょうか?
モニカ

列の順序は、ソースデータに表示される順序によって異なります。単純な奇数/偶数オルタネーターをOPに追加しました。
avatastic 2014年

5
これはスクリプトインジェクションに対して脆弱であることに注意してください。つまり、ユーザーが作成したコンテンツでは使用しないでください。
Timmmm 2015年

7
$( "#target_table_id")。append(tbl_body);を使用する必要があります$( "#target_table_id")。appendChild(tbl_body);の 代わりに jQueryオブジェクトは追加関数のみを公開するためです。
BornToCode 2015年

15

以下に示すように$を拡張して、オブジェクトのJSON配列からHTMLテーブルを作成します

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

次のように使用します。

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

ここで、TableContはいくつかのdivです


9

他のAFAIKのように脆弱ではない純粋なHTMLの方法:

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

使用例:

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

7

2DJavaScript配列をHTMLテーブルに変換する

2D JavaScript配列をHTMLテーブルに変換するには、実際には少しのコードが必要です。

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>


JSONファイルの読み込み

JSONファイルから2D配列をロードする場合は、Ajaxコードも少し必要になります。

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

5

HTMLテーブルへの非常に高度なJSONオブジェクトについては、この閉じたスレッドに基づくMy jQuerySolutionを試すことができます

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


2

ここで重複を見つけました:jsonデータをhtmlテーブルに変換します

まあ、商用プラグインを含む多くのプラグインが存在します(これを商用プロジェクトにしますか?!ちょっとやり過ぎです...しかし、ここでチェックアウトできます:https//github.com/alfajango/jquery-dynatable

これにはもっとフォークがあります: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"
        }]
    }
}];

コードを適用する

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

または、このjQueryプラグインもチェックアウトすることをお勧めします:https//github.com/jongha/jquery-jsontotable

ジョンハのプラグインの方が使いやすいと思います

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

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

2

別のjQuery依存ツールの使用を受け入れる場合は、Tabulatorを使用することをお勧めします。そうすれば、テーブルデータのフォーマットと処理に関して優れた柔軟性を維持しながら、HTMLやその他のDOM生成コードを記述する必要がなくなります。

ここに画像の説明を入力してください

Nodeを使用した別の作業例については、MMM-Tabulatorデモプロジェクトをご覧ください


2

これを行う簡単な方法の1つは次のとおりです。

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>


Drawrow関数は、次のように汎用にすることができます。functiondrawRow(rowData){var row = $( "<tr />")$( "#DataTable")。append(row); $ .each(rowData、function(k、v){row.append($( "<td>" + v + "</ td>"));}); }
Subra M

1

純粋な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);
    }
});

1

以下のように、Javascript + Jqueryを使用してこれを非常に簡単に行うことができます。一部の列を除外する場合は、forループ内にifステートメントを記述して、それらの列をスキップします。お役に立てれば!

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


0

@ Dr.saiのコードのビットコードを変更しました。これがお役に立てば幸いです。

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

これがいくつかの列を非表示にするのにも役立つことを願っています。 ファイルへのリンク


0

上記の@ Dr.saiの回答に基づいて、左側にヘッダーがあるピボットされた単一行ビュー。

jQueryの.textメソッドによって注入が防止されました

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

-1

さらに短い方法

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

HTML /スクリプトインジェクションに対して脆弱です。
Timmmm 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.