Использование XMLHttpRequest для извлечения данных из URL и отображения этих данных в таблице?

Question

Я пытаюсь получить данные с помощью XMLHttpRequest из URL (GET API) в форме JSON, а затем отобразить эти данные в таблице HTML.

Мне удалось получить данные , но не отображать его правильно.

Моя таблица отображается как:

Имя ID Тип поколения Регион

Имя ID Тип поколения Регион

Вместо:

Имя ID Тип генерации Регион

Булабасавр 1 First Grass Kanto

Мои JSON данные возвращаются как:

[{
  ability: "Overgrow",
  category: "Seed"
  description: "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger.",
  gender: "M",
  generation: "First",
  height: "2' 04''",
  id: 1,
  name: "Bulbasaur",
  picture: "bulbasaur.jpg",
  region: "Kanto",
  type: "Grass, Poison",
  weakness: "Fire, Flying, Ice, Psychic",
  weight: "15.2"
}]

Это мой JavaScript код:

var rootURL = "http://localhost:8080/WorksheetPokemon/rest/pokemon";

var xhttp = new XMLHttpRequest();

function pokemonTable(){

xhttp.open('GET', rootURL, true);

xhttp.onreadystatechange = function() {

//console.log(this.responseText);
if (xhttp.readyState === XMLHttpRequest.DONE) {
    var status = xhttp.status;
    if (status === 0 || (status >= 200 && status < 400)) {
        var json = JSON.parse(xhttp.responseText);
        createTable(json);
    } else {
        console.log("Error");
    }
  }
};

xhttp.send();

}


function createTable(json) {

console.log(json);

var tableBody = document.getElementById("table_body");  

// Populate table
json.forEach((row) => {

    var tr = document.createElement("tr");

    Object.keys(row).forEach((cell) => {

        var td = document.createElement("td");
        td.textContent = cell;
        tr.appendChild(td);

    });

    tableBody.appendChild(tr);
});

}

document.addEventListener("DOMContentLoaded", pokemonTable());

Answer 1

Как вы писали, первым параметром обратного вызова ForEach является строка. Когда вы используете Object.keys (строка), вы читаете ключи этих полей. Вот почему ваша таблица отображает имя этих полей, а не их содержимое.

Вместо использования Object.key (строка), вы должны использовать это:

json.forEach((row) => {

    var tr = document.createElement("tr");

    Object.keys(row).forEach((cell) => {

        var td = document.createElement("td");
        td.textContent = row[cell];
        tr.appendChild(td);

    });

    tableBody.appendChild(tr);
});

Answer 2

Object.keys() вернет все ключи от объекта в массиве.
Вам нужны значения, которые вы можете получить с помощью Object.values().

function createTable(json) {

  var tableBody = document.getElementById("table_body");  

  // Populate table
  json.forEach((row) => {

    var tr = document.createElement("tr");

    Object.values(row).forEach((cell) => {

        var td = document.createElement("td");
        td.textContent = cell;
        tr.appendChild(td);

    });

    tableBody.appendChild(tr);

  });

}