Доступ к массиву ручек с использованием индекса цикла

Я использую handlebars.js для перебора categories, а затем использую текущий индекс массива для доступа к элементу в массиве series. Я могу сделать это с помощью помощника ниже.

var json = {
    "categories": [{
            "id": 3,
            "name": "category 0"
        }, {
            "id": 6,
            "name": "category 1"
        }
    ],
    "series": [{
            "id": 1,
            "name": "DUMMY",
            "data": [{
                    "id": 5,
                    "name": "series 0 data 0"
                }, {
                    "id": 10,
                    "name": "series 0 data 1"
                }
            ]
        }
    ]
}

Handlebars.registerHelper('getArrayValues', function(ar, index, prop) {
    return ar[0].data[index][prop];
});

var template = Handlebars.compile(json);

{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id with helper: {{getArrayValues ../series @index 'id' }}</p>
<p>series name with helper: {{getArrayValues ../series @index 'name' }}</p>
{{/each}}

Могу ли я сделать это без помощника? Ниже моя попытка. Я также пробовал использовать lookup, но, похоже, могу получить доступ к свойствам, возвращаемым lookup.

{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id: {{../series.[0].data.[@index].id}}</p>
<p>series name: {{../series.[0].data.[@index].name}}</p>
{{/each}}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
428
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Одно решение, которое я нашел для этого, я не знаю, насколько оно хорошо, но оно отлично работает

Попробуй это :)

{{#each categories}}
  <p>id: {{this.id}}</p>
  <p>name: {{this.name}}</p>
  <p>series id with helper:{{#with (lookup  ../series.[0].data 
  @index) }}{{this.id}}{{/with}}</p>
  <p>series name with helper: {{#with (lookup  ../series.[0].data 
  @index) }}{{this.name}}{{/with}}</p>
{{/each}}

Спасибо, Нишант, хотя я уверен, что ваш ответ точен (однако не проверял), возможно, я буду придерживаться своей глупой вспомогательной функции, поскольку она имеет для меня смысл. Редактировать. Наверное поменяют на твою.

user1032531 03.04.2018 07:56

Протестировано, работает отлично. Я нашел документацию по #with на handlebarsjs.com/builtin_helpers.html. Спасибо

user1032531 03.04.2018 13:42

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