使用JavaScript从JSON生成HTML表格报错：TypeError读取undefined的'0'

问题情况 #

尝试用JavaScript从JSON接口生成HTML表格时，触发错误：TypeError: Cannot read properties of undefined (reading '0')，错误指向代码行：

const limit6 = Math.max(...Object.keys(response6[keys[keyIndex]][0].expenses)) + 1;

错误原因分析 #

1. 结构访问不严谨：代码直接访问response6[keys[keyIndex]][0].expenses，若response6[keys[keyIndex]]为空数组或不存在，[0]会返回undefined，进而读取expenses时抛出错误。
2. 数据引用错误：填充表格行时直接调用response6.expenses[index6]，但expenses、dt_posted、description实际属于response6[keys[keyIndex]][0]的子属性，而非顶层的response6对象。
3. 冗余长度计算：通过Math.max(...Object.keys(expenses)) +1获取数组长度完全多余，直接使用数组的length属性即可得到元素总数。

修复后的JavaScript代码 #

const requestUrl6 = 'https://api.npoint.io/1cae29b5fc8900f6cc5a';
const requestJSON6 = async url => {
  const response6 = await (await fetch(url)).json();
  const keys = Object.keys(response6);
  // 获取表格模板元素并检查是否存在
  const rowTemplate6 = document.getElementById('rowTemplate6');
  if (!rowTemplate6) return;

  for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
    const currentKeyData = response6[keys[keyIndex]];
    // 校验当前key对应的数据是否为有效数组
    if (!Array.isArray(currentKeyData) || currentKeyData.length === 0) continue;
    
    const dataItem = currentKeyData[0];
    // 校验数据项是否包含所需字段
    if (!dataItem?.expenses || !dataItem?.dt_posted || !dataItem?.description) continue;

    // 直接使用数组length属性获取循环次数
    const limit6 = dataItem.expenses.length;
    for (let index6 = 0; index6 < limit6; index6++) {
      let newRow6 = rowTemplate6.cloneNode(true);
      newRow6.id = '';
      // 从正确的数据源读取数据，用textContent替代innerHTML避免XSS风险
      newRow6.querySelector('.Expenses6').textContent = dataItem.expenses[index6];
      newRow6.querySelector('.Date6').textContent = dataItem.dt_posted[index6];
      newRow6.querySelector('.Purpose6').textContent = dataItem.description[index6];
      rowTemplate6.parentNode.appendChild(newRow6);
    }
  }
  // 移除模板行
  rowTemplate6.parentNode.removeChild(rowTemplate6);
}
requestJSON6(requestUrl6);

HTML调整建议 #

原HTML表头中的Lobying Activities存在拼写错误，建议修正为Lobbying Activities，保持与数据描述一致：

<tr class="toptable6">
    <th>Date</th>
    <th>Expenses</th>
    <th>Lobbying Activities</th>
</tr>

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