如何修改JavaScript代码仅在HTML表格中展示赛马JSON数据中的Race1赛事

要实现只显示编号为1的赛事及其马匹数据，我们只需要修改show函数，在处理数据时筛选出目标赛事，而不是遍历所有赛事。以下是调整后的完整代码和说明：

核心修改点 #

原来的代码会循环data.races中的所有赛事，我们需要：

• 使用Array.find()方法精准定位race.number等于"1"的目标赛事
• 仅对该目标赛事进行表格渲染
• 增加容错处理：如果未找到目标赛事，显示友好提示信息

调整后的JavaScript代码 #

// api url
const api_url = "https://www.smspariazitservices.com/applications/horse-racing-ws/mtc/actions/getDataBKS.php?date=2021-06-19&mno=05";

// Defining async function
async function getapi(url) {
  // Storing response
  const response = await fetch(url);
  // Storing data in form of JSON
  var data = await response.json();
  console.log(data);
  if (response) {
    hideloader();
  }
  show(data);
}

// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
  document.getElementById('loading').style.display = 'none';
}

// Function to define innerHTML for HTML table
function show(data) {
  let tab = `<tr>
  <th>Race #</th>
  <th>Race Name</th>
  <th>Race Time</th>
  </tr>`;

  // 筛选出编号为1的赛事
  const targetRace = data.races.find(r => r.race.number === "1");

  if (targetRace) {
    const { race, horses } = targetRace;
    // 渲染赛事基本信息（去除名称里的换行符）
    tab += `<tr>
    <td>${race.number} </td>
    <td>${race.name.trim()}</td>
    <td>${race.time}</td>
    </tr>
    <tr><td>Horse Number</td><td>Horse Name</td><td>Odds</td></tr> `;
    // 渲染该赛事下的所有马匹数据
    tab += horses.map(({number, name, odds}) => `<tr><td>${number}</td><td>${name}</td><td>${odds}</td></tr>`).join('');
    tab += `<tr><td colspan="3">&nbsp;</td></tr>`; // 合并列做美观分隔
  } else {
    // 如果未找到目标赛事，显示提示
    tab += `<tr><td colspan="3">未找到编号为1的赛事</td></tr>`;
  }

  // Setting innerHTML as tab variable
  document.getElementById("racing").innerHTML = tab;
}

额外优化细节 #

• 对race.name使用trim()方法去除末尾的换行符（原数据里带有\r），让显示更整洁
• 分隔行使用colspan="3"合并单元格，避免出现多余的空单元格
• 增加了未找到目标赛事的容错提示，提升用户体验
• 可选：给HTML表格添加基础样式，让展示效果更清晰（见下方HTML代码）

调整后的HTML代码（含基础样式） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Horse Racing Odds - Race 1</title>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    h1 {
      text-align: center;
    }
    .spinner-border {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <!-- Loader that shows until data loads -->
  <div class="d-flex justify-content-center">
    <div class="spinner-border" role="status" id="loading">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
  <h1>Race 1 Odds</h1>
  <!-- Table for displaying data -->
  <table id="racing"></table>
</body>
</html>

这样修改后，页面就只会展示编号为1的赛事及其对应的马匹数据了。

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