如何使用 javascript 將此 json 數據轉換為 html 表？

Question

我想使用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);`

Answer 1

由於您的 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)