Блог

Я пытаюсь создать веб-сайт для поиска учетных записей League of Legends и пытаюсь научиться правильно отображать 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. Как я могу это сделать? Нужно ли мне полностью реструктурировать то, как я собираюсь это сделать? Отправить справку.

По моему мнению, ваш лучший выбор — использовать какой-то механизм создания шаблонов, вы можете предопределить структуру DOM (шаблон), а затем добавить в нее свой объект данных (в лучшем случае json), и он отобразит шаблон со всеми данными, предоставленными вашим объектом данных.

Handlebarsjs — мой выбор, но есть много альтернатив, надеюсь, это поможет, если вам нужна дополнительная помощь, дайте мне знать https://handlebarsjs.com /

РЕДАКТИРОВАТЬ: к сожалению, я не работал с EJS, но я пытаюсь объяснить это на примере руля. «matchhistory.hbs» — это ваш пример шаблона, который вы могли бы использовать для отображения всех ваших совпадений. Это происходит через #each он будет перебирать все ваши данные, которые вы ему предоставляете. На веб-сервере вам просто нужно отобразить его и отправить обратно пользователю, запрашивающему https://example.com/matchhisorty например.

Что касается вашей текущей проблемы, вам не нужно создавать DOM, rendner сделает это за вас.

Экспресс-веб-сервер (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>