编程新手求助：JS调用TVMAZE API展示数据遇空值长度读取错误

嘿，刚看到你的问题，这个错误其实是异步编程里很常见的坑——fetch是异步操作，你的代码逻辑顺序出问题啦！

你现在的代码里，fetch发起请求后会立刻继续执行后面的alert和表格循环，但这时候请求还没完成，foo还是初始的null，所以json_data.length自然就会抛出“无法读取null的length属性”的错误。

另外我还注意到你代码里的几个小问题：

• TVMAZE接口返回的数据里，很多你要的字段（比如name、image、language这些）其实是嵌套在show对象里的，不是直接在根节点；
• 你每个<td>后面都加了</tr>，这会导致表格结构完全混乱；
• 有些字段名写错了，比如"country Name"应该是show.country.name，"rating Average"是show.rating.average。

下面是修正后的完整代码，我帮你把逻辑理顺，也修正了字段访问和表格结构：

// 直接在fetch的回调里处理数据，确保拿到数据后再操作
fetch('http://api.tvmaze.com/schedule/full')
  .then(resp => resp.json())
  .then(data => {
    // 这里data就是我们拿到的完整数据，不需要再赋值给foo
    const tbl = $("<table/>").attr("id", "mytable");
    $("#div1").append(tbl);

    // 遍历数据生成表格行
    data.forEach(item => {
      // 处理可能为null的字段，避免显示undefined
      const imageUrl = item.show.image?.medium || '无图片';
      const rating = item.show.rating?.average || '暂无评分';
      const country = item.show.country?.name || '未知国家';
      const genres = item.show.genres.length > 0 ? item.show.genres.join(', ') : '无分类';

      // 构建一行的HTML，注意只在最后加一个</tr>
      const tr = `
        <tr>
          <td>${item.id}</td>
          <td>${item.show.name}</td>
          <td><img src="${imageUrl}" alt="${item.show.name}" style="width:100px;"/></td>
          <td>${item.show.summary?.replace(/<[^>]+>/g, '') || '暂无简介'}</td>
          <td>${item.airdate}</td>
          <td>${item.airtime}</td>
          <td>${item.airstamp}</td>
          <td>${item.runtime || '未知时长'}</td>
          <td>${item.season}</td>
          <td>${item.show.language}</td>
          <td>${genres}</td>
          <td>${country}</td>
          <td>${item.show.network?.code || '未知代码'}</td>
          <td>${item.show.network?.timezone || '未知时区'}</td>
          <td>${rating}</td>
        </tr>
      `;
      $("#mytable").append(tr);
    });
  })
  .catch(err => {
    // 加上错误捕获，方便排查请求失败的问题
    console.error('请求数据失败:', err);
    alert('获取节目数据失败，请稍后重试');
  });

我还加了这些优化：

• 使用forEach替代for循环，代码更简洁；
• 处理了可能为null/undefined的字段，比如图片、评分，避免页面显示异常；
• 给summary字段去掉了HTML标签，让简介更干净；
• 给图片加了简单的样式，避免页面排版混乱；
• 增加了catch回调，捕获请求失败的情况，方便调试。

现在运行这段代码应该就能正常展示节目数据啦！

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