使用Javascript使用JSON創建表

Question

我想使用Javascript使用JSON創建表。

1.我創建json API網址（ 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

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 2

您必須在循環開始之前為標題添加行

 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>

Answer 3

這是您可以嘗試的..希望說明有意義..如果您無法獲得任何信息，請繼續進行評論...：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>