jQuery .getJSON（）數組作為表
[英]Jquery .getJSON() array as Table
問題描述
我目前正在使用一個項目，其中使用jQuery將查詢發送到服務器，並且返回的響應是數組。 但是，由於查詢之間的列數可能有所不同，我無法將接收到的數據發送到動態表。 到目前為止，我有以下內容，但似乎無法將數組解析為表：
<script>
var my_array;
$.getJSON("sql_query.php", // The server URL
{ id: "sewer_pipelines" },
function(json) {
my_array = json;
});
function generate_table() {
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.border = "1";
// Get a column count
var column_count = my_array[0].length;
// Add header row
var row = table.insertRow(-1);
// Creates a loop
for (var i = 0; i < column_count; i++) {
row = table.insertRow(-1);
for (var j = 0; j < column_count; j++);
var cell = row.insertCell(-1);
cell.innerHTML = my_array[i][j];
}
var array_table = document.getElementById("array_table");
array_table.innerHTML = "";
array_table.appendChild(table);
};
</script>
<html>
<input type="button" value="Generate Table" onclick="generate_table()" />
<div id="array_table"></div>
</html>
返回的數組格式為：
[{"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
{"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
{"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}]
是將數組變量放入第二個函數中起作用，還是我走在完全錯誤的軌道上？
3 個解決方案
解決方案1
0 2017-12-11 12:49:31
當您已經使用jQuery時，可以嘗試以下方法：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <script> var my_array = [ {"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"}, {"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"}, {"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"} ]; function generate_table() { // Create a HTML Table element. var table = $("<table border='1'></table>"); table.append($("<tr><th>GID</th><th>ID</th><th>Layer</th>")) for (var i = 0; i < my_array.length; i++) { table.append($("<tr><td>" + my_array[i]['gid'] + "</td><td>" + my_array[i]['id'] + "</td><td>" + my_array[i]['layer'] + "</td>")) } $("#array_table").html('') $("#array_table").append(table); }; </script> <input type="button" value="Generate Table" onclick="generate_table()" /> <div id="array_table"></div> </html>
解決方案2
0 2017-12-11 12:50:25
在這里，我修復了您的代碼。
<script>
var my_array = [
{"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
{"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
{"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}
];
var newArray = my_array.map((x) => [x.gid, x.id, x.layer]);
console.log(newArray[0][1]);
function generate_table()
{
// Create a HTML Table element.
var table = document.createElement("TABLE");
table.border = "1";
// Get a column count
var column_count = newArray[0].length;
var row_count = newArray.length;
// Add header row
var row = table.insertRow(0);
row.insertCell(-1).innerHTML = "gid";
row.insertCell(-1).innerHTML = "id";
row.insertCell(-1).innerHTML = "layer";
// Creates a loop
for (var i = 0; i < row_count; i++)
{
row = table.insertRow(table.rows.length);
for(var j = 0; j < column_count; j++)
{
var cell = row.insertCell(row.cells.length);
cell.innerHTML = newArray[i][j];
}
}
var array_table = document.getElementById("array_table");
array_table.innerHTML = "";
array_table.appendChild(table);
};
</script>
<input type="button" value="Generate Table" onclick="generate_table()" />
<div id="array_table"></div>
解決方案3
0 2017-12-11 13:31:16
var response = [{ "name":"john", "age":"6" }, { "name":"jack", "age":"6" }]; $.each(response, function(i, item) { $('<tr>').html( "<td>" + response[i].name + "</td><td>" + response[i].age + "</td><td>" ).appendTo('#data'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="data"></table>
jQuery getJSON解析字典數組並整理表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.