如何使用 AJAX 在 HTML 表中显示带有数字键的 JSON 值

Question

我是 Web 开发新手，一直在尝试使用来自不同 API 的数据构建表格，但遇到了对象内包含数字键的响应问题。

我得到了在日志中显示的响应，但无法将数据获取到表中。

我重用了之前测试的代码（成功），但在本次测试中，键是数字。这是响应：

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

  
  }
}}}}

此代码与成功代码之间的区别在于，成功代码以字母作为键，例如 ${ items[I].name} 并且它是一个数组而不是一个对象。

任何帮助将不胜感激。

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