отображать JSON в HTML-таблице, используя vanilla JS

Question

Я использую vanilla js для отправки запроса клиента в веб-сервис REST, который я разработал.Мой метод GET возвращает список книг (List) в формате json:

0: {name: "To Pimp a Butterfly", isbn: "ACBCDDSA", availableCopies: 10}
1: {name: "Stay with me", isbn: "SADDKHFLAHA", availableCopies: 15}
2: {name: "Foreign Gods", isbn: "AUZIBILLAH", availableCopies: 5}

У меня есть HTML-таблица, которую я хотел бы заполнить этими значениями.Я новичок в JS, и я только что выбрал его из-за внешнего интерфейса, который мне нужно было привести в порядок.если бы кто-то мог любезно указать направление, как я мог бы пойти по этому поводу.Вот блок кода, который я пытался сделать, но он не работает.

Я получаю ошибку.Uncaught TypeError: response.value не является функцией в XMLHttpRequest.request.onload (book.js: 103)

function getBooks() {
 const request = new XMLHttpRequest();
 request.open("GET", "rpc/manager/books");
 request.setRequestHeader("Content-Type", "application/json");
 request.send();
 request.onload = (e) => {
   if(request.readyState === 4 && request.status === 200) {
      const response = JSON.parse(request.responseText);
      console.log(response);

    if(response === null) {
       alert("no book found");
       return false;
    }
    const table = document.getElementById("bookTable");
    const row = table.insertRow(1);

    const name = row.insertCell(0);
    const isbn = row.insertCell(1);
    const availableCopies = row.insertCell(2);

    for(var i = 0; i < response.length; i++) {
      name.innerHTML = response.valueOf(i).name;
      isbn.innerHTML = response.valueOf(i).isbn;
      availableCopies.innerHTML = response.valueOf(i).availableCopies;
    }
   }
 }
}

это также моя HTML-таблица.

<table id="bookTable" align="center" border="1">
    <tr>
        <th>Name</th>
        <th>Isbn</th>
        <th>Available Copies</th>
    </tr>
</table>

I 'Буду рад, если кто-то может помочь, спасибо.

Answer 1

Цикл просто заменяет содержимое одного и того же набора ячеек, возможно, вы хотите создать новую строку для каждой книги.

Вы не показываете фактический JSON, который вы получаете, поэтому я предполагаю, что это массив книжных объектов, таких как:

[{"name": "To Pimp a Butterfly", "isbn": "ACBCDDSA", "availableCopies": 10},
 {"name": "Stay with me", "isbn": "SADDKHFLAHA", "availableCopies": 15},
 {"name": "Foreign Gods", "isbn": "AUZIBILLAH", "availableCopies": 5}]

Вы также можете упростить код.По умолчанию методы insert вставляются в конец набора строк или ячеек.

var response = [{"name": "To Pimp a Butterfly", "isbn": "ACBCDDSA", "availableCopies": 10},
     {"name": "Stay with me", "isbn": "SADDKHFLAHA", "availableCopies": 15},
     {"name": "Foreign Gods", "isbn": "AUZIBILLAH", "availableCopies": 5}];

let table = document.getElementById("bookTable");
let row, cell;

for (let i = 0; i < response.length; i++) {
  row = table.insertRow();
  cell = row.insertCell();
  cell.textContent = response[i].name;
  cell = row.insertCell();
  cell.textContent = response[i].isbn;
  cell = row.insertCell();
  cell.textContent = response[i].availableCopies;
}

<table id="bookTable">
  <tr><th>Name<th>ISBN<th>Copies
</table>

Answer 2

Чтобы помочь с вашей текущей ошибкой, вы захотите использовать обозначение в квадратных скобках для индексации в массиве ответов.Измените цикл for на ...

for(var i = 0; i < response.length; i++) {
  name.innerHTML = response[i].name;
  isbn.innerHTML = response[i].isbn;
  availableCopies.innerHTML = response[i].availableCopies;
}