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，所以我想它是一个像这样的书对象数组：

[{"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表格上显示JSON

2 个答案: