如何使用 AJAX 在 HTML table 中使用数字键显示 JSON 值

Question

我是 Web 开发的新手，我一直在尝试使用来自不同 API 的数据构建 table，但是运行遇到了响应问题在对象中有数字键。

我收到要在日志中显示的响应，但无法将数据发送到 table。

我重用了之前测试（成功）的代码，但在这个测试中，键是数字的。这是回复：

{"345017":"Simo","345019":"Simola","345020":"email","360241":"This is a comment","360858":"CEO","360859":"Test Company AS","360895":"Mr.","362692":"Football"}

这里是我从之前的成功测试中重用的代码：

window.onload=function(){


document.getElementById('button').addEventListener('click', loadRest);



  function loadRest() {
    window.onload=function(){
  document.getElementById('button').addEventListener('click', loadRest);
  
  function loadRest() {

var myArray =  []

buildTable(myArray)

$.ajax({
  method: 'GET',
  url: '(url here)',
  Accept: 'application/json',
  beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer (token here)');
  },  
success:function(response){
    myArray = response
    buildTable(myArray)
    console.log(myArray)
  }
  })

function buildTable(object){
  var table = document.getElementById('myTable')


 {
for (var i = object; i < object.length; i++){
    var row = `<tr>
            <td>${object[i][345017]}</td>
            <td>${object[i][345019]}</td>
            <td>${object[i][345020]}</td>
            <td>${object[i][360241]}</td>
            <td>${object[i][360858]}</td>
            <td>${object[i][360859]}</td>
            <td>${object[i][360895]}</td>
            <td>${object[i][362692]}</td>
          </tr>`
    table.innerHTML += row

  
  }
}}}}

这个和成功的区别在于，成功的是字母作为键，例如 <td>${items[I].name}</td>，而且它是一个数组而不是一个对象。

如有任何帮助，我们将不胜感激。

Answer 1

你可以试试这个代码

function buildTable(obj){

var table = document.getElementById('myTable');

Object.keys(obj).forEach((prop) => {
var row = `<tr>
<td>${obj[prop]}</td>
 </tr>`
table.innerHTML += row
});

}

结果

Simo
Simola
email
This is a comment
CEO
Test Company AS
Mr.
Football

如何使用 AJAX 在 HTML table 中使用数字键显示 JSON 值

How to show a JSON value with numeric key in HTML table using AJAX

html

javascript

ajax

json