时间戳

首页 > 解决方案 > 对象循环和渲染到 HTML

javascript - 对象循环和渲染到 HTML

问题描述

我正在尝试将数据动态呈现到我的 HTML 上，当selectPlayer单击数据时，它应该显示播放器列表的下拉列表并能够选择

同时选择统计时应出现在<div id="stats"></div>

我可以遍历对象，但如何将它动态呈现到 HTML 中？

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./static/style.css" />
  <title>card</title>
</head>

<body>
  <header>
    <h1 id="selectPlayer">Select a player...</h1>
  </header>
  <div id="stats">
    <div id="name"></div>
    <div id="position"></div>
  </div>
  <script>
    const statsData = {
      players: [{
          player: {
            info: {
              positionInfo: "Defender"
            },
            name: {
              first: "Toby",
              last: "Alderweireld"
            },
            currentTeam: {
              name: "Tottenham Hotspur"
            }
          },
          stats: [{
              name: "goals",
              value: 5
            },
            {
              name: "losses",
              value: 20
            },
            {
              name: "wins",
              value: 48
            },
            {
              name: "draws",
              value: 23
            }
          ]
        },
        {
          player: {
            info: {
              positionInfo: "Midfielder"
            },
            name: {
              first: "Yaya",
              last: "Toure"
            },
            currentTeam: {
              name: "Manchester City"
            }
          },
          stats: [{
              name: "goals",
              value: 65
            },
            {
              name: "losses",
              value: 49
            },
            {
              name: "wins",
              value: 149
            },
            {
              name: "draws",
              value: 35
            }
          ]
        },
        {
          player: {
            info: {
              positionInfo: "Attacker"
            },
            name: {
              first: "Riyad",
              last: "Mahrez"
            },
            currentTeam: {
              name: "Leicester City"
            }
          },
          stats: [{
              name: "goals",
              value: 22
            },
            {
              name: "losses",
              value: 23
            },
            {
              name: "wins",
              value: 35
            },
            {
              name: "draws",
              value: 21
            }
          ]
        }
      ]
    };

    document.getElementById(
      "selectPlayer"
    ).innerHTML = `<h1>${statsData.players}<h1>`;
    document.getElementById(
      "stats"
    ).innerHTML = `<h2> ${statsData.player.stats}<h2>`;
  </script>
</body>

</html>

在这里欣赏相当多的代码，但似乎有点卡住了

标签： javascripthtmlloopsobjectjavascript-objects

解决方案

有很多方法可以解决这个问题 - 一个简单的解决方案是将JSON 序列化为 string ，并使用JSON.stringify()方法直接在文档中显示它：

document.getElementById("stats").innerText = JSON.stringify(statsData.players);


const statsData = {
  players: [{
      player: {
        info: {
          positionInfo: "Defender"
        },
        name: {
          first: "Toby",
          last: "Alderweireld"
        },
        currentTeam: {
          name: "Tottenham Hotspur"
        }
      },
      stats: [{
          name: "goals",
          value: 5
        },
        {
          name: "losses",
          value: 20
        },
        {
          name: "wins",
          value: 48
        },
        {
          name: "draws",
          value: 23
        }
      ]
    },
    {
      player: {
        info: {
          positionInfo: "Midfielder"
        },
        name: {
          first: "Yaya",
          last: "Toure"
        },
        currentTeam: {
          name: "Manchester City"
        }
      },
      stats: [{
          name: "goals",
          value: 65
        },
        {
          name: "losses",
          value: 49
        },
        {
          name: "wins",
          value: 149
        },
        {
          name: "draws",
          value: 35
        }
      ]
    },
    {
      player: {
        info: {
          positionInfo: "Attacker"
        },
        name: {
          first: "Riyad",
          last: "Mahrez"
        },
        currentTeam: {
          name: "Leicester City"
        }
      },
      stats: [{
          name: "goals",
          value: 22
        },
        {
          name: "losses",
          value: 23
        },
        {
          name: "wins",
          value: 35
        },
        {
          name: "draws",
          value: 21
        }
      ]
    }
  ]
};

document.getElementById("stats").innerText = JSON.stringify(statsData.players);
<header>
  <h1 id="selectPlayer">Select a player...</h1>
</header>
<div id="stats"></div>

不过，更好的方法是以更易读的方式呈现 JSON 数据。为此，您通常需要在数据集合（数组）上“循环”，对于数组的每个项目，您需要进行一些额外的处理以使数据更具可读性。

例如，您可以执行以下操作以在 HTML 表中显示 JSON 数据：

/* Assuming you've replaced the stats element with a table */
const table = document.getElementById("stats");

/* Loop through each item of statsData object */
statsData.players.forEach(item => {

  /* Extract info and name objects from player (optional) */
  const { info, name } = item.player;

  /* Add row to table for current player */
  const row = table.insertRow();

  /* Add cell for name/position to row */
  const cellName = row.insertCell(0);
  const cellPosition = row.insertCell(1);

  /* Fill each cell with data from current player data */
  cellName.innerText = name.first;
  cellPosition.innerText = info.positionInfo;
});

有关完整的工作示例，请参阅下面的代码片段：

const statsData = {
  players: [{
      player: {
        info: {
          positionInfo: "Defender"
        },
        name: {
          first: "Toby",
          last: "Alderweireld"
        },
        currentTeam: {
          name: "Tottenham Hotspur"
        }
      },
      stats: [{
          name: "goals",
          value: 5
        },
        {
          name: "losses",
          value: 20
        },
        {
          name: "wins",
          value: 48
        },
        {
          name: "draws",
          value: 23
        }
      ]
    },
    {
      player: {
        info: {
          positionInfo: "Midfielder"
        },
        name: {
          first: "Yaya",
          last: "Toure"
        },
        currentTeam: {
          name: "Manchester City"
        }
      },
      stats: [{
          name: "goals",
          value: 65
        },
        {
          name: "losses",
          value: 49
        },
        {
          name: "wins",
          value: 149
        },
        {
          name: "draws",
          value: 35
        }
      ]
    },
    {
      player: {
        info: {
          positionInfo: "Attacker"
        },
        name: {
          first: "Riyad",
          last: "Mahrez"
        },
        currentTeam: {
          name: "Leicester City"
        }
      },
      stats: [{
          name: "goals",
          value: 22
        },
        {
          name: "losses",
          value: 23
        },
        {
          name: "wins",
          value: 35
        },
        {
          name: "draws",
          value: 21
        }
      ]
    }
  ]
};

const table = document.getElementById("stats");

/* Loop through each player of statsData object */
statsData.players.forEach(item => {

  /* Extract info and name objects from player (optional) */
  const { info, name } = item.player;
  
  /* Add row to table for current player */
  const row = table.insertRow();
  
  /* Add cell for name/position to row */
  const cellName = row.insertCell(0);
  const cellPosition = row.insertCell(1);
  
  /* Fill each cell with data from current player data */
  cellName.innerText = name.first;
  cellPosition.innerText = info.positionInfo;
});
<header>
  <h1 id="selectPlayer">Select a player...</h1>
</header>
<table id="stats">
  <thead><td>Name</td><td>Position</td></thead>
</table>

希望有帮助！

推荐阅读