我確實有這個 JSON 示例陣列，但我不知道如何遍歷它們并將其用于創建表行。
示例代碼：
var data = [
{foo1:"a",foo2:"b",foo3:"c"},
{foo1:"d",foo2:"e",foo3:"f"},
{foo1:"g",foo2:"h",foo3:"i"}
]
我確實使用了這種方法：
$.each(data, function (key, value) {
rows = "<tr id=" key "><td>" value.foo1 "</td><td>" value.foo2 "</td><td>" value.foo3 "</td><td>"</tr>";
});
//但我想讓它更靈活，這樣我就可以重用它來從另一個 JSON 陣列生成另一行，就像這個場景：
var dataNew = [
{lorem1:"j",lorem2:"k",lorem3:"l"},
{lorem1:"m",lorem2:"n",lorem3:"o"},
{lorem1:"p",lorem2:"q",lorem3:"r"},
{lorem1:"x",lorem2:"s",lorem3:"t"},
{lorem1:"w",lorem2:"y",lorem3:"z"}
]
//現在我不能使用上面的方法
uj5u.com熱心網友回復：
我們可以使用Object.entries()動態獲取鍵和值
var data = [
{foo1:"a",foo2:"b",foo3:"c"},
{foo1:"d",foo2:"e",foo3:"f"},
{foo1:"g",foo2:"h",foo3:"i"}
]
var dataNew = [
{lorem1:"j",lorem2:"k",lorem3:"l"},
{lorem1:"m",lorem2:"n",lorem3:"o"},
{lorem1:"p",lorem2:"q",lorem3:"r"},
{lorem1:"x",lorem2:"s",lorem3:"t"},
{lorem1:"w",lorem2:"y",lorem3:"z"}
]
const parseData = (data,table) => {
let rows = "";
data.forEach(d1 =>{
rows = "<tr>"
Object.entries(d1).forEach(d2 => {
rows = "<td id='" d2[0] "'>" d2[1] "</td>"
})
rows ="</tr>"
})
table.innerHTML = rows
}
parseData(data,document.querySelector("#table1"))
parseData(dataNew,document.querySelector("#table2"))<table border="1" id="table1">
<table>
<br/>
<table border="1" id="table2">
<table>uj5u.com熱心網友回復：
您可以收集出現在陣列中的物件中的可能鍵。然后遍歷原始物件陣列并在內部遍歷鍵陣列以獲取值并創建行。
功能正確性
需要先收集鍵，因為 JavaScript 不保證物件內屬性的順序。如果您知道陣列中的每個物件都具有相同的屬性，則可以僅從第一個物件收集鍵，而不是遍歷所有專案。
安全
另外，請注意通過連接字串創建 DOM 元素是不安全的，因為這種方法容易受到代碼注入的攻擊。為 DOM 元素的屬性賦值會.textContent清理內容。
var dataNew = [
{lorem1:"j",lorem2:"k",lorem3:"l"},
{lorem3:"o",lorem1:"m",lorem2:"n"},
{lorem2:"q",lorem1:"p",lorem3:"r"},
{lorem1:"x",lorem2:"s",lorem3:"t"},
{lorem1:"w",lorem3:"z",lorem2:"y"}
]
function renderTable(table, data) {
// Collect unique keys
var keys = Array.from(
data.reduce((acc, cur) => {
Object.keys(cur).forEach(key => acc.add(key));
return acc;
}, new Set())
);
// Columns
var columns = document.createElement('tr');
keys.forEach(key => {
var th = document.createElement('th');
th.textContent = key;
columns.appendChild(th);
});
table.appendChild(columns);
// Rows
data.forEach((row, idx) => {
var tr = document.createElement('tr');
tr.setAttribute('id', 'row-' idx);
keys.forEach(key => {
var td = document.createElement('td');
// using text content is more secure, since it
// sanitizes the value and prevents code injections
td.textContent = row[key];
tr.appendChild(td);
});
table.appendChild(tr);
});
}
var table = document.getElementById('table');
renderTable(table, dataNew);<table id="table">
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534753.html
標籤：javascript查询