Template7 with two loop each

Questions
1

Hello,
It’s possible to use two each with template7 ? I can’t do this.
I use route.js to get my data with 2 app.request : it’s ok, I have my 2 json parsed in 2 variables : “category” and “food”

I would like show a grouped listview with category and below elements it depend of category :

- Food category 1 -
food 1
food 2
...
- Food category 2 -
food 5
food 6
...

I tried something like this :

<div class="list">
    <div class="list-group">
        <ul>
        {{#each category}}
            <li class="list-group-title">{{category_name}}</li>
            {{#each food}}
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">{{food_name}}</div>
                    </div>
                </div>
            </li>
            {{/each}}
        {{/each}}
        </ul>
    </div>
</div>

But at this, I can’t add condition because it’s not possible to know what loop I’am.

In pure js, I can do it :

var category = [{"cat_name":"Pasta","cat_id":1},{"cat_name":"Sauce","cat_id":2}];

var food = [{"id":1,"food_name":"Penne","categorie_id":1},{"id":2,"food_name":"spaghetti","categorie_id":1},{"id":3,"food_name":"Bolognaise","categorie_id":2},{"id":4,"food_name":"Curry","categorie_id":2}];

category.forEach(function(c) {

    console.log('------- '+ c.cat_name + ' -------');

    food.forEach(function(f) {
        if (c.cat_id == f.categorie_id) {
            console.log(f.food_name);
        }
    });
});

But not with template7.
I tried to add an alias in each, like this :

{{#each category as c}}
unsuccessfully

Any help is welcome.
Thank you.

framework7-core 5.7.11
template7 : 1.4.2"
2

Template7 has #js_if check if you can do it with that.

3

Yes, I tried but like I said : I can’t add condition because it’s not possible to know what loop I’am.

4

I think you should try Partials. See the last part Template7 documentation.

5 
   <div class="list">
        <div class="list-group">
            <ul>
                {{#each category}}
                <li class="list-group-title">{{cat_name}}</li>
                {{#each ../food}}
                {{#js_if "this.id == ../cat_id"}}
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">{{food_name}}</div>
                        </div>
                    </div>
                </li>
                {{/js_if}}
                {{/each}}
                {{/each}}
            </ul>
        </div>
    </div>

Based on your variables: category and food

1 Like
6

@martinarlando super, thank you ! It worked.