时间戳

首页 > 解决方案 > 将 API url 中的 JSON 显示到 html 表中

javascript - 将 API url 中的 JSON 显示到 html 表中

问题描述

我目前正在尝试将 JSON 数据显示为网页中的表格：来自 API url 的原始数据如下所示：

{"body":"[{\"id\":\"67341472528\",\"name\":\"Dana Fin\"},{\"id\":\"87543263550\",\"name\":\"Jon Doe\"}]"}

我试图使用 jQuery/AJAX $.getJSON() 方法，它显示的数据如下：

[{"id":"67341472528","name":"Dana Fin"},{"id":"87543263550","name":"Jon Doe"}]

但是后来我一直试图将这些数据放入表格中，我尝试了很多东西和示例，但没有任何效果。

所以基本上我想知道是否有人做过这样的事情，谢谢

标签： javascriptjqueryajax

解决方案

尝试这样的事情：

// response from $.getJson()
const data = [{
  "id": "67341472528",
  "name": "Dana Fin"
}, {
  "id": "87543263550",
  "name": "Jon Doe"
}]

const table = document.createElement('table')
table.border = 1

// create header row for table)
const header = document.createElement('tr')
const idHeader = document.createElement('th')
idHeader.appendChild(document.createTextNode('id'))
const nameHeader = document.createElement('th')
nameHeader.appendChild(document.createTextNode('name'))
header.appendChild(idHeader)
header.appendChild(nameHeader)
table.appendChild(header)

// create entries for each response
for (const entry of data) {
  const row = document.createElement('tr')
  const id = document.createElement('td')
  id.appendChild(document.createTextNode(entry.id))
  const name = document.createElement('td')
  name.appendChild(document.createTextNode(entry.name))
  row.appendChild(id)
  row.appendChild(name)
  table.appendChild(row)
}

document.querySelector('body').appendChild(table)

这是一个工作的CodePen

推荐阅读