使用香草 JS 在 html table 上显示 JSON

Question

我正在使用 vanilla js 将客户端请求发送到我设计的 REST Web 服务。我的 GET 方法 returns json 格式的图书列表 (List)：

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 table 我想填充这些值。我是 JS 的新手，我只是因为需要整理前端而才选择它。如果有人可以指出我该怎么做的方向。这是一段代码，我尝试这样做，但它无法正常工作。

我收到一个错误。未捕获的类型错误：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;
    }
   }
 }
}

这也是我的htmltable.

<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，所以我想它是一组书籍对象，例如：

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

使用香草 JS 在 html table 上显示 JSON

display JSON on an html table using vanilla JS

html

javascript

rest

client

json