[SOLVED] Infinite Scrolling and handlebars - nested {{#each}} does not work with the next dynamic items anymore

1

I am using infinite scroll to generate a list of hotels with name data, itemsPerLoad = 10 items or (hotels) per each scrolling load to display every time I reach the bottom… and that works fine…

Amenities of a hotel it is an array of data containing a list of amenities of a hotel…

{{#each items}}
        {{name}}
        {{location}}
        
        {{#each amenities}}
           {{name}}
        {{/each}}

{{/each}}

{{#if hasMoreItems}}
   <div class="preloader infinite-scroll-preloader"></div>
{{/if}}

The Problem

This works for the 10 first displayed items without any problem and display the hotels with their amenities correctly, but if I scroll down to display the next 10 hotels then the error appears in the console, I do not have idea why this is so, if it works fine the first the 10 items to display by default why then after scrolling down to the bottom to display the next 10 hotels the nested each loop stop working and do not find the object…

Console Error after scrolling down for the next 10 hotels:

TypeError: undefined is not an object (evaluating 'ctx_3.amenities')

I do not understand this behaviour… but I will appreciate any ideas to fix this when you use inside {{#each items}} another nested {{#each}} loop…

thanks

2

Problem fixed! array in nested array with each handlebar was reading an array in another level page with same name, I changed that and I found it is now working…

my error… using same names in different pages…
:slight_smile: