cURL获取嵌套JSON提取outcomes字段生成表格白屏求解

页面空白基本都是遍历无容错、JSON格式非法、脚本执行时机错误、跨域拦截这几个原因导致的，按下面的步骤实现可以直接跑通：

注意：你贴出的JSON样例是截断残缺的，测试逻辑前必须先拿到接口返回的完整、语法合法的JSON数据，否则解析阶段就会报错。

数据提取逻辑 #

三层嵌套遍历必须加全链路空值兜底，避免脏数据打断JS执行，提取函数代码如下：

/**
 * 从原始接口数据中提取所有outcomes的球队名和赔率
 * @param {Array} rawData cURL拿到的解析后的JSON数组
 * @returns {Array} 提取后的赔率列表
 */
function extractAllOdds(rawData) {
  const result = [];
  // 最外层数据格式不对直接返回空数组，不抛错
  if (!Array.isArray(rawData)) return result;

  // 第一层：遍历赛事
  rawData.forEach(event => {
    // 第二层：遍历博彩平台，字段不存在就默认空数组
    const bookmakers = event?.bookmakers || [];
    bookmakers.forEach(bookie => {
      // 第三层：遍历盘口
      const markets = bookie?.markets || [];
      markets.forEach(market => {
        // 第四层：提取目标赔率项
        const outcomes = market?.outcomes || [];
        outcomes.forEach(item => {
          // 球队名和赔率都存在才入库，跳过脏数据
          if (item?.name && item?.price !== undefined) {
            result.push({
              platform: bookie.title, // 附带平台名方便区分，不需要可以删除这行
              team: item.name,
              odds: item.price
            })
          }
        })
      })
    })
  })
  return result;
}

页面渲染实现 #

不要在DOM节点加载完成前操作页面元素，要么把脚本放在body标签最末尾，要么监听DOM加载完成事件后再执行渲染，完整页面代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>NFL超级碗夺冠赔率</title>
  <style>
    table { border-collapse: collapse; width: 600px; margin: 20px 0; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    th { background: #f5f5f5; }
    .error { color: red; padding: 20px; }
  </style>
</head>
<body>
  <h2>NFL超级碗夺冠赔率表</h2>
  <table>
    <thead>
      <tr>
        <th>博彩平台</th>
        <th>球队名称</th>
        <th>夺冠赔率</th>
      </tr>
    </thead>
    <tbody id="oddsTbody"></tbody>
  </table>

  <script>
    // 等DOM全部加载完成再执行逻辑
    document.addEventListener('DOMContentLoaded', async () => {
      try {
        // 生产环境替换为你的后端代理接口地址，不要直接前端请求第三方接口避免跨域
        // const res = await fetch('/api/get-nfl-odds');
        // if (!res.ok) throw new Error('接口请求失败');
        // const rawData = await res.json();

        // 测试阶段可以把cURL拿到的完整JSON粘贴在这里替换空数组
        const rawData = [];

        const oddsList = extractAllOdds(rawData);
        const tbody = document.getElementById('oddsTbody');
        
        // 拼接表格行
        let tableHtml = '';
        oddsList.forEach(row => {
          tableHtml += `
            <tr>
              <td>${row.platform}</td>
              <td>${row.team}</td>
              <td>${row.odds}</td>
            </tr>
          `
        })
        tbody.innerHTML = tableHtml || '<tr><td colspan="3">暂无数据</td></tr>';
      } catch (err) {
        // 捕获所有错误直接在页面提示，不要白屏
        document.body.innerHTML = `<p class="error">加载失败：${err.message}</p>`;
        console.error('赔率加载错误：', err);
      }
    })

    // 粘贴前面写的extractAllOdds函数
    function extractAllOdds(rawData) {
      const result = [];
      if (!Array.isArray(rawData)) return result;
      rawData.forEach(event => {
        const bookmakers = event?.bookmakers || [];
        bookmakers.forEach(bookie => {
          const markets = bookie?.markets || [];
          markets.forEach(market => {
            const outcomes = market?.outcomes || [];
            outcomes.forEach(item => {
              if (item?.name && item?.price !== undefined) {
                result.push({
                  platform: bookie.title,
                  team: item.name,
                  odds: item.price
                })
              }
            })
          })
        })
      })
      return result;
    }
  </script>
</body>
</html>

白屏问题排查清单 #

打开浏览器F12控制台查看报错信息，对应解决即可：

• 报JSON parse error：返回内容不是合法JSON，要么数据截断、要么接口返回了HTML错误页，先把原始返回内容校验JSON语法
• 报Cannot read properties of undefined：遍历嵌套结构时没有做空值兜底，上面的代码已经加了全链路兜底，直接替换即可
• 报CORS error：浏览器跨域策略拦截了前端第三方请求，把cURL请求逻辑放到后端做代理，前端只请求自己的后端接口
• 控制台无报错但页面空白：脚本执行太早，DOM还没渲染就去取表格节点，按示例用DOMContentLoaded事件包裹执行逻辑即可

内容的提问来源于stack exchange，提问作者André Luiz Mardonis