使用香草JS在html表格上顯示JSON

Question

我正在使用Vanilla js將客戶端請求發送到我設計的REST Web服務。 我的GET方法以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的新手，我只是選擇它是因為我需要整理一下前端。 如果有人可以指出我該如何做的方向。 這是我嘗試做的代碼塊，但沒有成功。

我得到一個錯誤。 未被捕獲的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>

如果有人可以幫忙，我會很高興，謝謝。

Answer 1

為了幫助您解決當前的錯誤，您需要使用方括號表示法來索引響應數組。 將for循環更改為...

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

Answer 2

循環只是替換同一組單元格的內容，想必您想為每本書創建一個新行。

您沒有顯示所獲得的實際JSON，因此我想它是一個類似book對象的數組：

[{"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>