如何在WordPress站点用JavaScript从JSON API自动生成球队页面？

既然你已经搞定了team_id和球队数据的关联，接下来把API数据转换成可视化的积分榜页面就很清晰了。下面给你两种主流实现思路，从原生JS到框架都有，你可以根据项目复杂度选择：

方案1：原生JavaScript（无框架，快速落地） #

这种方式适合小型项目或者不需要依赖框架的场景，直接用浏览器原生API就能搞定。

1. 从API获取并解析数据 #

先写一个请求API的函数，处理数据解析：

async function fetchLeagueTable() {
  try {
    const response = await fetch('你的API接口地址');
    if (!response.ok) throw new Error('请求失败');
    const { data } = await response.json();
    renderLeagueTable(data); // 获取到数据后调用渲染函数
  } catch (error) {
    document.getElementById('table-container').innerHTML = `<p>加载失败：${error.message}</p>`;
  }
}

2. 动态渲染积分榜表格 #

创建一个渲染函数，把JSON数据转换成HTML表格：

function renderLeagueTable(teams) {
  const container = document.getElementById('table-container');
  
  // 创建表格结构
  const table = document.createElement('table');
  table.innerHTML = `
    <thead>
      <tr>
        <th>排名</th>
        <th>球队</th>
        <th>场次</th>
        <th>胜</th>
        <th>平</th>
        <th>负</th>
        <th>净胜球</th>
        <th>积分</th>
        <th>近期状态</th>
        <th>结果</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;
  
  const tbody = table.querySelector('tbody');
  
  // 循环生成每一行球队数据
  teams.forEach(team => {
    const row = document.createElement('tr');
    // 利用你已实现的team_id关联逻辑，这里可以给球队名称加点击事件或者链接
    row.innerHTML = `
      <td>${team.position}</td>
      <td><span data-team-id="${team.team_id}">${team.team_name}</span></td>
      <td>${team.overall.games_played}</td>
      <td>${team.overall.won}</td>
      <td>${team.overall.draw}</td>
      <td>${team.overall.lost}</td>
      <td>${team.total.goal_difference}</td>
      <td>${team.total.points}</td>
      <td>${team.recent_form}</td>
      <td>${team.result}</td>
    `;
    tbody.appendChild(row);
  });
  
  container.appendChild(table);
}

3. 添加基础样式（提升可读性） #

给表格加一些简单的CSS，让它看起来更像正规的积分榜：

#table-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

#table-container th, #table-container td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#table-container th {
  background-color: #f2f2f2;
  font-weight: bold;
}

#table-container tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

#table-container [data-team-id] {
  cursor: pointer;
  color: #0066cc;
}

4. 初始化调用 #

页面加载完成后触发数据请求：

window.addEventListener('DOMContentLoaded', fetchLeagueTable);

方案2：React/Vue框架（适合复杂项目） #

如果你的项目已经在用前端框架，用组件化的方式实现会更易维护。这里以React为例：

React组件示例 #

import { useState, useEffect } from 'react';

function LeagueTable() {
  const [teams, setTeams] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('你的API接口地址');
        if (!response.ok) throw new Error('请求失败');
        const { data } = await response.json();
        setTeams(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div className="table-container">
      <table>
        <thead>
          <tr>
            <th>排名</th>
            <th>球队</th>
            <th>场次</th>
            <th>胜</th>
            <th>平</th>
            <th>负</th>
            <th>净胜球</th>
            <th>积分</th>
            <th>近期状态</th>
            <th>结果</th>
          </tr>
        </thead>
        <tbody>
          {teams.map(team => (
            <tr key={team.team_id}>
              <td>{team.position}</td>
              <td onClick={() => handleTeamClick(team.team_id)}>{team.team_name}</td>
              <td>{team.overall.games_played}</td>
              <td>{team.overall.won}</td>
              <td>{team.overall.draw}</td>
              <td>{team.overall.lost}</td>
              <td>{team.total.goal_difference}</td>
              <td>{team.total.points}</td>
              <td>{team.recent_form}</td>
              <td>{team.result}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  // 这里复用你已实现的team_id关联逻辑
  function handleTeamClick(teamId) {
    console.log('点击了球队ID：', teamId);
    // 跳转到球队详情页或触发其他逻辑
  }
}

export default LeagueTable;

额外优化建议 #

• 加载状态：在请求数据时显示加载动画，提升用户体验
• 错误处理：捕获API请求失败的情况，展示友好的错误提示
• 排序功能：可以给表头添加点击事件，实现按积分、净胜球等字段排序
• 响应式设计：适配移动端，让表格在小屏幕上可以横向滚动

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