CODEWITHSUNDEEP
handlebars.js
lf_celine
lf_celine

Reputation: 673

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.

Upvotes: 1

Views: 2244

Answers (1)

Steve H.
Steve H.

Reputation: 6947

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}}

Upvotes: 2

Related Questions