Handlebarsjs - вложенные #each не выводятся

Я работаю над приложением, которое выводит таблицу с данными в ней. У меня нормальные данные выводятся правильно, однако у меня есть значение, которое возвращается как «WWWWW» / «WLDWD» (буквы обозначают выигрыш / ничью / проигрыш). Я загрузил изображение внизу, которое показывает мою таблицу, включая каждый цикл, который находится за пределами первого цикла #each, который работает по назначению.

У меня есть таблица, которая выглядит следующим образом

Позиция Клуб Сыграно Выиграно Ничья Пропало GF GA Форма очков GD

У меня есть #each, который просматривает и выводит значения для этих полей, затем у меня есть другой #each в первом #each, я хочу, чтобы он выводил недавнюю форму, она разделена на моем index.js (показано ниже).

Он возвращает данные в следующем формате: [ [ 'W', 'W', 'W', 'W' ], [ 'W', 'W', 'W', 'W' ], [ 'W', 'W', 'W', 'W' ],.

Я использую приведенный ниже код для его вывода, если он находится внутри моего другого #each, который выводит другие данные, он не запускается, однако, если он находится за пределами другого #each, он работает отлично.

{{#each recentForm}} 
   {{this.[0]}} // I have 5 of these (5 is the max that will ever be returned)
{{/each}}

Полный код:

router.get('/table', (req, res, next) => {
  var url = `http://api.football-api.com/2.0/standings/1204${config.auth}`

  axios.get(url).then(response => {
    const posSort = response.data.sort((a, b) => {
      return a.position - b.position;
    });

    var recentForm = posSort.map(pos => pos.recent_form.split(''));
    console.log(recentForm);
    res.render('table', {
      teamStats: posSort,
      recentForm: recentForm
    });

  }).catch(error => {
    console.log(error);
  })

});
<table>
  <tr>
    <th>Position</th>
    <th>Club</th>
    <th>Played</th>
    <th>Won</th>
    <th>Drawn</th>
    <th>Lost</th>
    <th>GF</th>
    <th>GA</th>
    <th>GD</th>
    <th>Points</th>
    <th>Form</th>
  </tr>
    {{#each teamStats}}
      <tr>
        <td>{{position}}</td>
        <td>{{team_name}}</td>
        <td>{{overall_gp}}</td>
        <td>{{overall_w}}</td>
        <td>{{overall_d}}</td>
        <td>{{overall_l}}</td>
        <td>{{overall_gs}}</td>
        <td>{{overall_ga}}</td>
        <td>{{gd}}</td>
        <td>{{points}}</td>
      // Below is the one I want to have working - it doesn't output anything when looping even the code is identical to the code outside this loop.
      {{#each recentForm}}
        <td>{{this.[0]}}</td>
      {{/each}}
      </tr>
    {{/each}}
      // Below works perfectly, loops through and outputs them in a td each
      {{#each recentForm}}
        <td>{{this.[0]}}{{this.[1]}}{{this.[2]}}{{this.[3]}}{{this.[4]}}</td>
      {{/each}}
</table>

Table Output - with last the random letters on the bottom are the debugging #each loop which works as intended.

0
0
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Исправить

Здесь следует использовать комбинацию ../ оператор и lookup помощник. Обратите внимание на вложенные скобки вспомогательного синтаксиса (), а не на фигурные скобки.

{{#each (lookup ../recentForm @index)}}
  {{this}}
{{/each}}

Оператор ../ помогает получить правильное свойство «RecentForm» (верхний уровень, родственный элемент «teamStats»), поскольку помощник #each устанавливает новый контекст. Помощник lookup берет @index из цикла teamStats и передает значение 'latestForm' по этому индексу (то есть команде, в которой в настоящее время находится цикл 'teamStats').

Примечание: вам, вероятно, понадобится только один <td> для столбца «форма», чтобы выровняться с одним <th>, фрагмент ниже делает это.

Запустите / см. Фрагмент ниже.

// shortened data for brevity
var data = {
  teamStats: [
    {team: 'Man U'},
    {team: 'Arsenal'}
  ],
  recentForm: [
    ['W','W','L','D','W'],
    ['L','L','L','D','W']
  ]
};


//inline template for snippet simplicity
var template = '' +
'<table>' +
'<thead>' +
'<tr>'+
'<th>Team Name</th>' +
'<th>Form</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'{{#each teamStats}}' +
'<tr>' +
'<td>{{team}}</td>' +
// start 'form' cell
'<td>' +
'{{#each (lookup ../recentForm @index)}}' +
'{{this}}' +
'{{/each}}' +
'</td>' +
// end 'form' cell
'</tr>' +
'{{/each}}' +
'</tbody>' +
'</table>';

var output = Handlebars.compile(template)(data);
console.log(output)
// for snippet simplicity
$('body').html(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

Альтернатива

В качестве альтернативы, было бы проще проанализировать значения «latestForm» и поместить их в свойство внутри каждого объекта «teamStats». Тогда вашему шаблону не потребуются более сложные ../ и lookup, и он просто станет:

<td>{{recentForm}}</td>

// shortened data for brevity
var teamStats = [
    {team: 'Man U'},
    {team: 'Arsenal'}
  ];
var recentForm = [
    ['W','W','L','D','W'],
    ['L','L','L','D','W']
  ];
// loop each team, and add recentForm at index
teamStats.forEach(function(team, index) {
  team.recentForm = recentForm[index].join(',');
});

var data = {
  teamStats: teamStats
};

var template = '' +
'<table>' +
'<thead>' +
'<tr>'+
'<th>Team Name</th>' +
'<th>Form</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'{{#each teamStats}}' +
'<tr>' +
'<td>{{team}}</td>' +
'<td>{{recentForm}}</td>' +
'</tr>' +
'{{/each}}' +
'</tbody>' +
'</table>';

var output = Handlebars.compile(template)(data);
console.log(output)
// for snippet simplicity
$('body').html(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

Другие вопросы по теме