javascript 使用localhost API将JSON文件转换为HTML表以获取数据

gpfsuwkq 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(132)

当我尝试使用JSON数据创建HTML表时，我一直收到以下错误：

Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at requestJSON6

下面是我的JSON：

{
    "AAPL": [
        {
            "expenses": {
                "0": "1920000.00",
                "1": "1920000.00",
                "2": "1920000.00",
                "3": "1920000.00",
                "4": "1920000.00"
            },
            "dt_posted": {
                "0": "2022-10-20T21:53:30-04:00",
                "1": "2022-10-20T21:53:30-04:00",
                "2": "2022-10-20T21:53:30-04:00",
                "3": "2022-10-20T21:53:30-04:00",
                "4": "2022-10-20T21:53:30-04:00"
            },
            "description": {
                "0": "Providing information related to Apple Pay",
                "1": "Issues related to technology platform liability Issues related to content moderation",
                "2": "Issues related to transparency and government access to data, including H.R. 7072/S. 4373, the Non-Disclosure Order (NDO) Fairness Act",
                "3": "Issues related tothe requirements of E.O. 14028, an Executive Order on Improving the Nation's Cybersecurity Issues related to cybersecurity requirements in H.R. 7900, the National Defense Authorization Act for Fiscal Year 2023",
                "4": "Issues related to the domestic manufacturing of semiconductors, including funding for the previously enacted CHIPS for America Act; S. 1260, the United States Innovation and Competition Act; and H.R. 4521, America COMPETES Act Providing information related to Apples supply chain"
            }
        }
    ]
}

这是我的代码，它可以很好地与其他JSON文件一起工作，所以不确定这个问题是什么。

const requestUrl6 = 'https://api.npoint.io/1cae29b5fc8900f6cc5a';
const requestJSON6 = async url => {

  const response6 = await (await fetch(url)).json();
  const limit6 = Math.max(...Object.keys(response6.expenses)) + 1;
  for(let index6 = 0; index6 < limit6; index6++)
  {
      let newRow6 = rowTemplate6.cloneNode(true);
      newRow6.id = '';
      newRow6.querySelector('.Expenses6').innerHTML = response6.expenses[index6];
      newRow6.querySelector('.Date6').innerHTML = response6.date[index6];
      newRow6.querySelector('.Purpose6').innerHTML = response6.sharesHeld[index6];
      rowTemplate6.parentNode.appendChild(newRow6);
  }
  rowTemplate6.parentNode.removeChild(rowTemplate6); 
}
requestJSON6(requestUrl6);

JavaScript

来源：https://stackoverflow.com/questions/74744190/json-file-to-html-table-using-localhost-api-to-get-data

1条答案

按热度按时间

xfb7svmp1#

取消嵌套对象时，您错过了几个步骤。

const requestJSON6 = async url => {

  const response6 = await (await fetch(url)).json();
  const limit6 = Math.max(...Object.keys(response6.expenses)) + 1; //Here response6.expenses doesn't exist, instead you want to access response6.AAPL[0].expenses
  for(let index6 = 0; index6 < limit6; index6++)
  {
      let newRow6 = rowTemplate6.cloneNode(true);
      newRow6.id = '';
      newRow6.querySelector('.Expenses6').innerHTML = response6.expenses[index6];
      newRow6.querySelector('.Date6').innerHTML = response6.date[index6];
      newRow6.querySelector('.Purpose6').innerHTML = response6.sharesHeld[index6];
      rowTemplate6.parentNode.appendChild(newRow6);
  }
  rowTemplate6.parentNode.removeChild(rowTemplate6); 
}

类似这样的操作将允许您浏览所有键：

const requestUrl6 = 'https://api.npoint.io/1cae29b5fc8900f6cc5a';
const requestJSON6 = async url => {

  const response6 = await (await fetch(url)).json();
  const keys = Object.keys(response6);
  for (let keyIndex = 0; keyIndex < keys.length; keyIndex++){
  const limit6 = Math.max(...Object.keys(response6[keys[keyIndex]][0].expenses)) + 1; //Note here that i take the first entry of the sub-array
  for(let index6 = 0; index6 < limit6; index6++)
  {
      let newRow6 = rowTemplate6.cloneNode(true);
      newRow6.id = '';
      newRow6.querySelector('.Expenses6').innerHTML = response6.expenses[index6];
      newRow6.querySelector('.Date6').innerHTML = response6.date[index6];
      newRow6.querySelector('.Purpose6').innerHTML = response6.sharesHeld[index6];
      rowTemplate6.parentNode.appendChild(newRow6);
  }
  rowTemplate6.parentNode.removeChild(rowTemplate6); }
}

正如注解中所指出的，这将只取子数组“AAPL”的第一个条目，根据您的对象，这可能会带来一些问题，如：
1.如果数组为空，则会导致Object.keys(response6[keys[keyIndex]][0]未定义，从而再次导致类似的问题
1.如果您对任何其他条目感兴趣，在这些情况下，最好添加必要的检查和/或数组遍历来处理这些情况。

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 使用localhost API将JSON文件转换为HTML表以获取数据

1条答案

相关问题

热门标签

最新问答