在jquery中打印json數組

Question

我想在表中打印JSON數組。這是我的代碼。有什麼建議麼？提前致謝。

[ 
 
    { 
 
    "id": 1, 
 
    "name": "name1", 
 
    "age": 10, 
 
    "feedback": "feedback1" 
 
    }, 
 
    { 
 
    "id": 2, 
 
    "name": "name2", 
 
    "age": 90, 
 
    "feedback": "feedback2" 
 
    }, 
 
    { 
 
    "id": 3, 
 
    "name": "name3", 
 
    "age": 30, 
 
    "feedback": "feedback3" 
 
    }, 
 
    { 
 
    "id": 4, 
 
    "name": "name4", 
 
    "age": 50, 
 
    "feedback": "feedback4" 
 
    } 
 
] 
 

 
var fileName = ""; 
 

 
function GridLibrary(fileName) { 
 
    this.fileName = fileName; 
 

 
} 
 
GridLibrary.prototype = { 
 
    set_fileName: function(fileName) { 
 
    this.fileName = fileName; 
 
    }, 
 
    get_fileName: function() { 
 
    return this.fileName; 
 
    } 
 
}; 
 

 
GridLibrary.prototype.display = function() { 
 
    $.ajax({ 
 

 
    url: this.get_fileName(), 
 
    error: function(that, e) { 
 

 
     console.log(e); 
 
    }, 
 
    success: function(data) { 
 
     // printing the keys 
 
     var Mytable = "<table>"; 
 
     $.each(data[0], function(key, value) { 
 
     $('body').append('<tr><td id="div' + key + '" </td></tr>'); 
 
     $('#div' + key).append(key); 
 
     }); 
 
     // printing the rest 
 
     $.each(data, function(index, MyList) { 
 
     $.each(MyList, function(key, value) { 
 
      $('#div' + key).append(" " + MyList[key] + " "); 
 
     }); 
 
     }); 
 
     Mytable += '</table>'; 
 
     $('body').append(Mytable); 
 
    } 
 
    }); 
 
};

輸出

id 1 2 3 4 
name name1 name2 name3 name4 
age 10 90 30 50 
feedback feedback1 feedback2 feedback3 feedback4 

，但我希望它像

id name age feedback 
1 name1 10 feedback1 
2 name2 90 feedback2 
3 name3 30 feedback3 
4 nanme4 50 feedback4 

Answer 1

你可以試試這個：

var table = [{ 
    "id": 1, 
    "name": "name1", 
    "age": 10, 
    "feedback": "feedback1" 
}, { 
    "id": 2, 
    "name": "name2", 
    "age": 90, 
    "feedback": "feedback2" 
}, { 
    "id": 3, 
    "name": "name3", 
    "age": 30, 
    "feedback": "feedback3" 
}, { 
    "id": 4, 
    "name": "name4", 
    "age": 50, 
    "feedback": "feedback4" 
}]; 

function addTable(tableData) { 

    var table = $('<table>'); 

    var tableHeading = $('<tr>'); 


    for (var title in tableData[0]){ 
    if (! tableData[0].hasOwnProperty(title)) 
     continue; 

    var headingColumn = $('<th>'+ title +'</th>'); 
    headingColumn.appendTo(tableHeading); 
    } 

    tableHeading.appendTo(table); 

    tableData.forEach((rowData)=>{ 

    var row = $('<tr>'); 

    for (var columnData in rowData) { 
     if (! rowData.hasOwnProperty(columnData)) 
     continue; 

     var column = $('<td>' + rowData[columnData] + '</td>'); 

     column.appendTo(row); 
    } 

    row.appendTo(table); 

    }); 

    table.appendTo('body'); 
} 

addTable(table); 

小提琴：https://jsfiddle.net/41g8g9Lc/1/

要知道這並不檢查以確保列數是各行中一樣。如果需要，可以添加這種處理。

Answer 2

你正在做一個新的<tr>每個<td>而鍵並且需要在數據點上同樣<tr>

添加如下內容：

$('body').append('<tr id="keys"></tr>'); 
    $('body tr.keys').append('<td id="div' + key + '" </td>'); 

，然後你需要爲每個數據點集合追加到表的新錶行，然後依次通過數據來創建<td> s。

Answer 3

我通常做類似的下面，你可以換成你自己的JSON數組：

Live Example

HTML：

<h2>An Example of Turning an Array of Objects into a Html Table</h2> 

<div id="left">&nbsp;</div> 
<div id="results"></div> 
<div id="right">&nbsp;</div> 

CSS（可選）：

body { 
    background: gray; 
} 

#results, 
#left, 
#right { 
    float: left; 
} 

#left { 
    width: 33.33%; 
} 

#right { 
    width: 33.3%; 
} 

#results { 
    width: 33.33%; 
} 

h2{ 
    font-family:georgia; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    background-color: teal; 
    color: #f0ffff; 
} 

td, 
th { 
    border: black solid 1px; 
    padding: 5px; 
} 

td { 
    background-color: teal; 
    color: white; 
} 

th { 
    background-color: blue; 
    color: white; 
    font-family: georgia; 
} 

的JavaScript：

var json = [{ 

    "firstname": "Larry", 
    "lastname": "Lane", 
    "phone1": "111-111-1111" 

}, { 
    "firstname": "Gypsy", 
    "lastname": "Lane", 
    "phone1": "111-111-1111" 

}]; 

//array to hold the html for the table 
var html = []; 

//add the opening table and tablebody tags 
html.push("<table>\n<tbody>"); 


//begin adding the table headers 

html.push("<tr>"); 

//loop through the property names of the first object 
for(var propertyNames in json[0]){//begin for in loop 

    html.push("<th>" + propertyNames + "</td>"); 

}//end for in loop 

html.push("</tr>"); 

//loop through the array of objects 
json.forEach(function(item) { //begin forEach 

    //add the opening table row tag 
    html.push("<tr>"); 

    //loop though each of the objects properties 
    for (var key in item) { //begin for in loop 

    //append the table data containing the objects property value 
    html.push("<td>" + item[key] + "</td>"); 

    } //end for in loop 

    //add the closing table row tag 
    html.push("</tr>"); 

}); //end forEach 

//add the closing table and table body tags 
html.push("<table>\n</tbody>"); 

//testing display of results 
document.getElementById("results").innerHTML = html.join(""); 

Answer 4

你使用兩種不同的方法來輸出您的標記。

如果您要使用字符串連接，請將其用於整個表格。關鍵是，你在之後追加<table></table>正文你創建了行和單元格。

不僅如此，而且重複更新頁面上的每個單元格的標記只是很差的練習，而且非常不高效。