如何从JavaScript对象数组中获取并展示money_line的Home和Away值

需求说明 #

从RapidAPI的ODDS API返回的JSON数据中，提取events内periods下num_0的money_line中的home和away值，展示到HTML表格对应列，现有代码已实现球队名称展示，需修正完成赔率提取逻辑。

示例JSON关键数据结构 #

{
  "events": [
    {
      "home_team": "湖人",
      "away_team": "勇士",
      "periods": [
        {
          "num": 0,
          "money_line": {
            "home": -120,
            "away": +100
          }
        }
      ]
    }
  ]
}

修正后的代码实现 #

1. index.html（保留表格结构，确保赔率列存在） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>赛事赔率展示</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>主队</th>
                <th>客队</th>
                <th>主队赔率</th>
                <th>客队赔率</th>
            </tr>
        </thead>
        <tbody id="oddsTableBody">
            <!-- JS动态插入数据 -->
        </tbody>
    </table>
    <script src="odds.js"></script>
</body>
</html>

2. odds.js（修正数据提取与渲染逻辑） #

const xhr = new XMLHttpRequest();
const url = '你的RapidAPI请求URL'; // 替换为实际请求地址
xhr.open('GET', url, true);
xhr.setRequestHeader('X-RapidAPI-Key', '你的API密钥'); // 替换为你的密钥
xhr.setRequestHeader('X-RapidAPI-Host', 'odds.p.rapidapi.com');

xhr.onload = function() {
    if (this.status === 200) {
        const data = JSON.parse(this.responseText);
        const tableBody = document.getElementById('oddsTableBody');
        
        data.events.forEach(event => {
            const row = document.createElement('tr');
            
            // 原有球队名称渲染逻辑保留
            const homeTeamCell = document.createElement('td');
            homeTeamCell.textContent = event.home_team;
            row.appendChild(homeTeamCell);
            
            const awayTeamCell = document.createElement('td');
            awayTeamCell.textContent = event.away_team;
            row.appendChild(awayTeamCell);
            
            // 提取num=0时段的赔率数据
            const targetPeriod = event.periods.find(period => period.num === 0);
            let homeOdds = '无数据';
            let awayOdds = '无数据';
            
            if (targetPeriod && targetPeriod.money_line) {
                homeOdds = targetPeriod.money_line.home;
                awayOdds = targetPeriod.money_line.away;
            }
            
            // 插入赔率到表格
            const homeOddsCell = document.createElement('td');
            homeOddsCell.textContent = homeOdds;
            row.appendChild(homeOddsCell);
            
            const awayOddsCell = document.createElement('td');
            awayOddsCell.textContent = awayOdds;
            row.appendChild(awayOddsCell);
            
            tableBody.appendChild(row);
        });
    }
};

xhr.send();

关键修正点 #

• 用Array.find()精准定位periods中num为0的时段对象
• 增加空值判断，避免数据缺失时页面报错
• 新增表格列，将提取到的home和away赔率值插入对应位置

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