Javascript 使用vanilla JS在html表上显示JSON

我正在使用vanilla js向我设计的REST web服务发送客户端请求。my GET方法返回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表，我想用这些值填充它。 我是JS的新手，我之所以选择它，是因为我需要整理前端。如果有人能指点一下我该怎么做。这里有一段代码，我试着去做，但是没有成功

我犯了一个错误。未捕获类型错误：response.value不是函数 在XMLHttpRequest.request.onload（book.js:103）

函数getBooks（）{ const request=new XMLHttpRequest（）； 请求。打开（“获取”、“rpc/manager/books”）； setRequestHeader（“内容类型”、“应用程序/json”）； request.send（）； request.onload=（e）=>{ if（request.readyState==4&&request.status==200）{ const response=JSON.parse（request.responseText）； 控制台日志（响应）； 如果（响应===null）{ 警报（“未找到书本”）； 返回false； } const table=document.getElementById（“bookTable”）； const行=table.insertRow（1）； const name=row.insertCell（0）； 常量isbn=行插入单元格（1）； const availableCopies=row.insertCell（2）； 对于（变量i=0；i 这也是我的html表

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

名称
Isbn
可用副本

---

如果有人能帮助我，我将非常高兴，谢谢。

要帮助您解决当前的错误，您需要使用方括号表示法来索引到响应数组中。将for循环更改为

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

for（变量i=0；i

循环只是替换同一组单元格的内容，可能您希望为每本书创建一个新行

您没有显示得到的实际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”：“给蝴蝶拉皮条”，“isbn”：“ACBCDDSA”，“availableCopies”：10}，
{“姓名”：“和我呆在一起”，“isbn”：“SADDKHFLAHA”，“可用副本”：15}，
{“名称”：“外国神”，“isbn”：“奥兹比拉”，“可用的硬币”：5}]；
let table=document.getElementById（“bookTable”）；
让行，单元格；
for（设i=0；i

姓名是多少份

您的“json格式”不是有效的json。实际上，当我使用json.parse（request.responseText）解析响应时，我的端点返回java.util.List；并记录在控制台上，这就是我得到的@RobGHey@Ben我实现了这一点。它用数组中的最后一项填充表。谢谢你的回复。也许我能从这里解决一些问题。谢谢罗伯。您能不能给我一个提示，说明为什么在声明变量时使用关键字let，而不是var？谢谢@RobG@olatunjioniyide-因为我喜欢时髦？；-）没有真正的理由，你可以使用var来处理一切问题，所以对我来说真的是个难题。我认为const应该只用于真正的常量（比如

cost PI=Math.PI

），而不应该只用于只分配一次值的所有东西（可能包含大约90%的变量）。

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