使用JSON数据生成HTML表格时遭遇TypeError错误求助

错误信息 #

Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.keys ()
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"
            }
        }
    ]
}

我的代码 #

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);

问题分析与修复 #

核心问题 #

1. JSON结构访问错误：JSON最外层是AAPL数组，内部才包含expenses等对象，代码直接访问response6.expenses会导致该值为undefined，调用Object.keys(undefined)就会触发类型错误。
2. 字段名称不匹配：
   • JSON中的日期字段是dt_posted，代码里误用了response6.date[index6]
   • JSON中的描述字段是description，代码里误用了response6.sharesHeld[index6]

修复后的代码 #

const requestUrl6 = 'https://api.npoint.io/1cae29b5fc8900f6cc5a';
const requestJSON6 = async url => {
  const response6 = await (await fetch(url)).json();
  // 正确获取AAPL数组中的第一个数据对象
  const data = response6.AAPL[0];
  // 基于expenses的键计算循环上限
  const limit6 = Math.max(...Object.keys(data.expenses)) + 1;
  
  for(let index6 = 0; index6 < limit6; index6++) {
      let newRow6 = rowTemplate6.cloneNode(true);
      newRow6.id = '';
      // 匹配正确的字段名称
      newRow6.querySelector('.Expenses6').innerHTML = data.expenses[index6];
      newRow6.querySelector('.Date6').innerHTML = data.dt_posted[index6];
      newRow6.querySelector('.Purpose6').innerHTML = data.description[index6];
      rowTemplate6.parentNode.appendChild(newRow6);
  }
  rowTemplate6.parentNode.removeChild(rowTemplate6); 
}
requestJSON6(requestUrl6);

额外优化建议 #

• 可以添加空值兜底，避免数据缺失时页面报错：

  newRow6.querySelector('.Expenses6').innerHTML = data.expenses[index6] || '无数据';
  

• 如果AAPL数组可能包含多个元素，可以遍历数组处理每个对象，而不是仅取第一个元素。

内容的提问来源于stack exchange，提问作者kiestuthridge23