Как я могу конвертировать данные JSON в HTML-таблицу, используя Fetch (без 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!');
});

Мне нужно представить данные JSON в HTML-таблице, здесь часть моего кода с использованием 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>`;
}