Search code examples
handlebars.js

Use of "#each" with multiple variables in Handlebars


How to "select" a value with "this" when there are multiple #each in Handelbars ?

                {{#each marqueauction}}
                {{#each modelauction}}
                <div class="results__container--box">
                    {{this.marqueauction}}
                    {{this.modelauction}}
                </div>
                {{else}}
                <div class="results__container--box">
                    <p>Aucun résultat d'enchères n'est disponible pour ce modèle.</p>
                </div>
                {{/each}}
                {{/each}}

EDIT: I want to call my MongoDB database with mongoose and display results in a box container. For that, I loop through my results array.

My Mongoose model:

const DemocarauctionSchema = new Schema({
    objectID: {
        type: Number
    },
    cars_getroute: {
        type: String
    },
    gm_url: {
        type: String
    },
    "results": { type: [{
        marque: {
            type: String
        },
        model: {
            type: String
        },
        model_year: {
            type: String
        },
        price_str: {
            type: String
        },
        prince_int: {
            type: Number
        },
        price_currency: {
            type: String
        },
        sold: {
            type: Boolean
        },
        auction_house: {
            type: String
        },
        auction_country: {
            type: String
        },
        auction_date: {
            type: String
        },
        auction_datetime: {
            type: String
        },
        auction_url: {
            type: String
        },
        image_urls: {
            type: String
        },
        price_int_eu: {
            type: Number
        },
    }]}    
}

I loop through the array in Express/Node:

const [democarauctions] = result;

        let marqueauction = [];
        for (let i = 0; i < democarauctions.results.length; i++) {
            marqueauction.push(democarauctions.results[i].marque)
        }

        let modelauction = [];
        for (let i = 0; i < democarauctions.results.length; i++) {
            modelauction.push(democarauctions.results[i].model)
        }
...

And I call the results array in my "res.render":

res.render(demo, {
            results: democarauctions.results,
            marqueauction: marqueauction,
            modelauction: modelauction,
            modelyearauction: modelyearauction,
            etc.})

Now I'd like to render on my HTML multiple box for each result, with marqueauction, modelauction, modelyearauction in each one. I use handlebars.


Solution

  • It is best to avoid this and instead use named block parameters :

    {{#each marqueauction as |marque|}}
      {{#each modelauction as |model|}}
        <div class="results__container--box">
          {{marque}}
          {{model}}
        </div>
      {{else}}
        <div class="results__container--box">
          <p>Aucun résultat d'enchères n'est disponible pour ce modèle.</p>
        </div>
      {{/each}}
    {{/each}}
    

    I'm not sure why you are breaking apart the original collection into multiple collections and then trying to combine them again in the presentation. Just use the results directly.

    EDIT: based on your updated question:

    {{#each results as |auction|}}
      <div class="results__container--box">
        {{auction.marque}}
        {{auction.model}}
      </div>
    {{else}}
      <div class="results__container--box">
        <p>Aucun résultat d'enchères n'est disponible pour ce modèle.</p>
      </div>
    {{/each}}