0

I am wondering if it is possible to remove of return only one value for my handlebars template value despite the way that I am routing my sql call. Basically my route is querying all the records of my one table (table: images) while including a second table where there is one record associated (table: description) with all of the records being queried. As a result, whenever I try to this object within my page, I can only use the properties of the one record table (table: description) as a loop, which displays the value as many times as there are Images being displayed. Is there a way within handlebars to limit this down to only one value?

Here is how I currently display this one record table property:

{{#image}}
            <h3>{{this.description.body}}</h3>
{{/image}}

Here is my route:

router.get('/:pattern/:color/result', function(req, res, image){

    console.log(req.params.color);
    console.log(req.params.pattern);

    db.Images.findAll({ 
        where: {
            pattern: req.params.pattern,
            color: req.params.color
        },
        include: [{ model: db.Description, attributes: ['body']}],
        attributes: ['id', 'pattern', 'color', 'imageUrl', 'imageSource', 'description_id', 'description.body']
    }).then(function(image){
        //console.log(doc.descriptions_id);
        res.render('pages/result.hbs', {
            pattern : req.params.pattern,
            color : req.params.color,
            image : image
            })
        });
});

Here is my view file:

<div class="container">
    <div class="row pattern-choice">
        <div class="col-md-12">
            <h2><i>What to wear</i></h2>
            {{#image}}
            <h3>{{this.description.body}}</h3>
            {{/image}}
        </div>
    </div>
    <div class="row pattern-choice">
        <div class="col-md-12">

            <h2><i>Inspiration</i></h2>
        </div>
    </div>
    <div class="row">

            {{#each image}}
            <div class="col-lg-3 col-md-4 col-xs-6 thumb inspiration-image">
            <ul>
                <li>
                    <div class="image-placeholder">

                        <a href="{{ this.imageUrl }}" data-toggle="lightbox"><img class="img-responsive img-rounded"  src="{{ this.imageUrl }}"></a>
                    </div>
                    <p><i>({{this.imageSource}})</i></p>
                </li>
            </ul>
            </div>
            {{/each}}
    </div>
    <div class="row">
            <h3 class="button-choice"><a href="/" class="button-link" id="link-restart">TRY ON SOME MORE</a></h3>
    </div>
</div>
cphill
  • 5,596
  • 16
  • 89
  • 182

1 Answers1

0

See this question regarding accessing array elements with handlebars. Here is an exmaple:

<div class="col-md-12">
    <h2><i>What to wear</i></h2>
    <h3>{{image.[0].description.body}}</h3>
</div>

Also, you may want to look into using the limit option with your include query.

Community
  • 1
  • 1
Evan Siroky
  • 9,040
  • 6
  • 54
  • 73
  • thank you again for your help. I tried `this.description.body.[0]` but this gives me the first character in the body string for the amount of images that are found. I then tried to use the `limit` option as such and it limits both my images and description attributes to the first record. Is there a way where I can just limit the description attribute to the first record? limit code: include: `[{ model: db.Description, attributes: ['body'], }], limit: 1, attributes: ['id', 'pattern', 'color', 'imageUrl', 'imageSource', 'description_id', 'description.body']` – cphill Oct 28 '15 at 01:20
  • thanks for your example, but no value is passed, but eight `

    ` tags are produced, which matches the amount of image records in my table.

    – cphill Oct 29 '15 at 00:29
  • Hmm, it worked fine for me. Did you remove the `{{#image}}` enclosure? – Evan Siroky Oct 29 '15 at 16:38