0

我正在尝试创建一个英雄联盟帐户查找网站，并且我正在尝试学习如何正确呈现 HTML。我有一个大对象，其中包含许多不同匹配项的信息。我想为匹配历史记录中的每个匹配项创建一个 DOM 元素，然后使用对象中包含的信息填充该元素。我怎样才能以动态的方式做到这一点。我并不总是知道对象中有多少匹配项。

 match0: {
    champion: 76,
    gameStartTime: 1600413655154,
    gameDuration: 1347,
    playerList: {
      Team_100_JUNGLE: [Object],
      Team_100_MIDDLE: [Object],
      Team_100_BOTTOM: [Object],
      Team_100_SUPPORT: [Object],
      Team_100_TOP: [Object],
      Team_200_MIDDLE: [Object],
      Team_200_JUNGLE: [Object],
      Team_200_BOTTOM: [Object],
      Team_200_SUPPORT: [Object],
      Team_200_TOP: [Object]
    },
    result: 'Loss',
    team_100_total_kills: 15,
    team_200_total_kills: 23
  },

这就是每场比赛在比赛历史数组中的样子。数组中可能有 1 个这样的对象，或者 1000 个。我该怎么做？我是否需要完全重组我正在做的事情？发送帮助。

4

1 回答 1

0

在我看来，您最好的选择是使用某种模板引擎，您可以预定义一个 DOM 结构（模板），然后将您的数据对象（最好是 json）扔给它，它将使用您的数据对象提供的所有数据呈现模板.

Handlebarsjs 是我的选择，但有很多选择，如果您需要进一步的帮助，请告诉我 https://handlebarsjs.com/

编辑：遗憾的是，我没有使用 EJS，但我尝试用 Handlebars 示例来解释它。“matchhistory.hbs”是您的示例模板，您可以使用它来显示所有匹配项。这通过#each 发生，它将遍历您提供的所有数据。例如，在网络服务器中，您只需渲染它并将其发送回请求https://example.com/matchhisorty的用户。

至于您当前的问题，您没有创建 DOM，渲染器会为您完成。

快递网络服务器（index.js）：


//This is only temporary, you need to call the lol api so you got the newest data
//Call the api in the router.get('/matchhistory')

let matchhistory = [
match0: {
    champion: 76,
    ...
    result: 'Loss',
    team_100_total_kills: 15,
    team_200_total_kills: 23
  },
  match1: {
    champion: 76,
    ...
    result: 'Loss',
    team_100_total_kills: 15,
    team_200_total_kills: 23
  },
]


router.get('/matchhistory', function(req, res, next) {
  let raw = matchhistory; //Here you can make your api call to get the matchhistory data
  let parsedata = JSON.parse(raw); //Parse it to json
  res.render('matchhistory', { title: 'Posts - Canime', pod_cards: home.pod.cards , naventry: home.nav.naventry}); //Send back the rendered Page
});

比赛历史..hbs

<ul class="matchhistory-nav mr-auto">
    {{#each matchhistory}}
        <li class="nav-item" class="color-{{this.result}}">
            {{this.champion}}
        </li>
    {{/each}}
</ul>
于 2020-10-12T06:56:33.607 回答