[英]How Can I Convert JSON Data in HTML Table using Fetch (without jQuery)
[英]How can I convert this json data to html table with javascript?
我想使用json
数据创建一个HTML
表。 json
数据会随时间变化。 当将此json
数据转换为HTML
表时,该表看起来与此一致。 它表示值的 alignment 和表格的宽度。 如何将json
数据转换为HTML
表?
[
{
"1": [{
"Time": "01:35 AM",
"Location": "dhaka bangladesh",
"BUS Detail": {
"air_Logo": "logo goes here",
"air_Name": "Airbus"
},
"busNo": "AK119",
"arrTime": "05:40 AM",
"arrival Loc": "barisal"
}]
}
]`// Extract value from table header.
let col = [];
for (let i = 0; i < myBooks.length; i++) {
for (let key in myBooks[i]) {
if (col.indexOf(key) == -1) {
col.push(key);
}
}
}
// Create a table.
const table = document.createElement("table");
// Create table header row using the extracted headers above.
let tr = table.insertRow(-1); // table row.
for (let i = 0; i < col.length; i++) {
let th = document.createElement("th"); // table header.
th.innerHTML = col[i];
tr.appendChild(th);
}
// add json data to the table as rows.
for (let i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (let j = 0; j < col.length; j++) {
const tabcel = tr.insertCell(-1);
if (typeof myBooks[i][col[j]] === 'object') {
tabcel.setAttribute('rowspan','2');
tabcel.innerHTML = `<table><td>${myBooks[i][col[j]].air_Name}</td> <td> ${myBooks[i][col[j]].air_Logo}</td> </table>`;
} else {
tabcel.innerHTML = myBooks[i][col[j]];
}
}
// for (let j = 0; j < col.length; j++) {
// let tabCell = tr.insertCell(-1);
// tabCell.innerHTML = myBooks[i][col[j]];
// }
}
// Now, add the newly created table with json data, to a container.
const divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);`
由于您的 object 不平坦,因此您无法真正将其全部呈现到桌面上。 您必须对嵌套对象做出决定。 下面我只是使用 json.stringify 在表格单元格中显示这些对象。 你当然应该根据你的需要来处理这个。
const data = [ { "1": [ { Time: "01:35 AM", Location: "dhaka bangladesh", "BUS Detail": { air_Logo: "logo goes here", air_Name: "Airbus" }, busNo: "AK119", arrTime: "05:40 AM", "arrival Loc": "barisal" } ] } ]; const base = data[0]["1"]; const table = document.createElement("table"); const thead = table.createTHead(); const tbody = document.createElement("tbody"); table.append(tbody) const headRow = thead.insertRow(); const headers = Object.keys(base[0]).forEach((head) => { let cell = headRow.insertCell(); cell.textContent = head; }); base.forEach((obj) => { const row = tbody.insertRow(); const vals = Object.values(obj); vals.forEach((v) => { const cell = row.insertCell(); if (typeof(v).== 'string') { return cell.textContent = JSON;stringify(v). } cell;textContent = v }); }). document.body.append(table)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.