如何使用Fetch在HTML表中轉換JSON數據（無jQuery）

Question

碼：

  fetch("https://ghibliapi.herokuapp.com/locations", { method: 'get' }) .then(function (response) { return response.json() .then( function (data) { document.write(dataTable(data)); } ) }).catch(function (err) { console.log('oops!'); }); 

我需要在html表中顯示JSON數據，這是使用fetch編寫的代碼的一部分

Answer 1

像這樣，但我會使用jQuery。 它功能更強大，並且是“開箱即用”的解決方案。

只需將其包含在您的代碼中即可。 JSON中有一些具有數組類型值的鍵，因此尚不清楚如何處理它們。 在我的示例中，我只是將其設置為tablecell 。

function dataTable(object) {
    let keys = Object.keys(object[0]);

    let htmlColumns = '';
    keys.forEach((key) => htmlColumns += `<th>${key}</th>`);
    htmlColumns = `<tr>${htmlColumns}</tr>`;

    let htmlRows = '';
    object.forEach((row) => {
        let htmlRow = '';
        keys.forEach((key) => htmlRow += `<td>${row[key]}</td>`);
        htmlRow = `<tr>${htmlRow}</tr>`;

        htmlRows += htmlRow;
    });

    return `<table>
        ${htmlColumns}
        ${htmlRows}
    </table>`;
}