使用 Javascript 使用 JSON 创建表

Question

我想使用 Javascript 创建带有 JSON 的表。

1。我创建 json API url (http://sample.com/getAllItems)

它会像这样返回 json 数据；

[{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},{"ID":4,"NAME":"","DEPARTMENT":"","TITLE":"smaple title2","CONTENTS":"sample content2","TYPE":null,"CREATED_AT":"2017-05-01 11:44:44","UPDATED_AT":"0000-00-00 00:00:00"}]

2。我想用json数据制作表格所以..

    var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

    $.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });

    window.onload = function() {
        var itemTable = $("#itemTable"); 
        var makeTable = $("<table>").appendTo(itemTable); 
        makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});

        $.each( data, function( index, row) {
            var makeTr = $("<tr>").appendTo(makeTable);
            console.log("index : "+index);
            console.log("row : "+ row);

            $.each( option, function( i, fieldInfo ) {
                var makeTd = $("<td>").appendTo(makeTr);
                console.log("Index : "+index);
                console.log("Row : "+row);
                console.log( "i : "+i);
                console.log( "fieldInfo : "+fieldInfo);
                console.log( "fieldInfo.field : "+fieldInfo.field);
                console.log( "Row[Field] : "+row[fieldInfo.field]);

                makeTd.html( row[fieldInfo.field]);
                makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"});
            });
        });
    }

</script>

和

返回

--------------------------------------
1   | sample title | sample content
--------------------------------------
2   | sample title2| sample content2
----------------------------------------

我想使用标题单元格，但我不能.. 我怎样才能得到这样的表格？

--------------------------------------
ID  | Title        | Content
--------------------------------------
1   | sample title | sample content
--------------------------------------
2   | sample title2| sample content2
----------------------------------------

Answer 1

这是你可以尝试的东西..希望解释有意义..如果有什么你不明白的请继续评论...：D

var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

//commented your Ajax for testing.

    /*$.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });
*/

//get the data varable set

data = [{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},{"ID":2,"NAME":"","DEPARTMENT":"","TITLE":"smaple title2","CONTENTS":"sample content2","TYPE":null,"CREATED_AT":"2017-05-01 11:44:44","UPDATED_AT":"0000-00-00 00:00:00"}];


//begin creating table on load.
window.onload = function() {
        
        //create table element.
        var makeTable = $("<table>");
        //append table to existing div here it have class "test".
        $(".test").append($(makeTable));
        //append first row for headings.
        $(makeTable).append($("<tr>"));
        
        //append all heading in loop.
        $.each(option,function(i,dt){
            //simply find first tr and append td with content to it.
            $(makeTable).find("tr").append("<td>"+dt["field"]+"</td>");
        });
    
      // start appending data.
      $.each(data,function(i,row){
        //find tbody in table and add tr to it.
           var nrow = $(makeTable).find('tbody').append("<tr>"); 
       //for each options find its value in data and append to newly created tr above.
           $.each(option,function(j,dt){
              // this is actually what you want..  
              $(nrow).append("<td>"+row[dt["field"]]+"</td>");
            });
       });
    }

    //done.

table,td
{
border: 1px #CCC solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="test">
</div>

Answer 2

var makeTh = $("<th>").appendTo(makeTable);
$.each(option, function (index, row) {
    var makeTd = $("<td>").append(makeTh);
    makeTd.css({width, row['width']}).html(row['field']);
});

尝试在第一个 $.each 上添加代码。

Answer 3

您必须在循环开始之前添加标题行

 var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

    $.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });

    window.onload = function() {
        var itemTable = $("#itemTable"); 
        var makeTable = $("<table>").appendTo(itemTable); 
        var head='<tr><th>ID</th><th>TITLE</th><th>CONTENT</th></tr>';
        makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});
          $(head).appendTo(makeTable);
        $.each( data, function( index, row) {
            var makeTr = $("<tr>").appendTo(makeTable);
            console.log("index : "+index);
            console.log("row : "+ row);

            $.each( option, function( i, fieldInfo ) {
                var makeTd = $("<td>").appendTo(makeTr);
                console.log("Index : "+index);
                console.log("Row : "+row);
                console.log( "i : "+i);
                console.log( "fieldInfo : "+fieldInfo);
                console.log( "fieldInfo.field : "+fieldInfo.field);
                console.log( "Row[Field] : "+row[fieldInfo.field]);

                makeTd.html( row[fieldInfo.field]);
                makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"});
            });
        });
    }

</script>