0

I am writing code for a website in js and handlebars and can't figure out how to get the website to show the element when using the {{#each}} tag for every item in my SQL database. The Handlebars Code:

        <section class="pb-4 pt-4">
          <div class="d-flex mb-2 align-items-center">
            <h2>Latest Recipes</h2>
            <a href="/explore-latest" class="ms-auto">View More</a>
          </div>
      {{#each rows}}
        <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
          
          <a href="/recipe/#" class="col text-center category__link">
            <div class="category__img category__img--large shadow">
              <img src="img/american-pancakes.jpg" alt="American Pancakes" loading="lazy" />
            </div>
            <div class="pt-1">{{this.recipe_name}}</div>
          </a>
        
        </div>
      {{/each}}

        </section>

Everything in the code shows on the website page until the line of {{#each rows}}

And here is the JavaScript:

 connection.query('SELECT * FROM recipes WHERE recipe_id = "1"', (err, rows) => {
      connection.release(); // When finished, release the query from the connection pool

      if (!err) {
        console.log(rows);
        res.render("index", {rows});
      }
    });

When I console.log the data it displays nicely as:

[
  RowDataPacket {
    recipe_id: 1,
    cuisine_id: 1,
    step_id: 1,
    quantity_id: 1,
    recipe_name: 'Pancakes',
    recipe_description: 'Pancakes are a classic breakfast dish that are easy to make and can be customized with a variety of toppings.',
    prep_time: '00:10:00.000',
    cook_time: '00:20:00.000'
  }
]

Thanks for any help.

I tried to change where the {{#each rows}} and other things but when i inspected the website it would just 'ignore' the code in the {{each} block.

Strawzy
  • 11
  • 3
  • I suspect `rows` isn't what you think it is. I would recommend logging out the value right before the `#each` to see what you are dealing with. `{{log rows}}`. – 76484 Feb 26 '23 at 22:12
  • @76484 hi thanks for the help, however the `{{log rows}}` command just logs what the console log command does ```[ RowDataPacket { recipe_id: 1, cuisine_id: 1, step_id: 1, quantity_id: 1, recipe_name: 'Pancakes', recipe_description: 'Pancakes are a classic breakfast dish that are easy to make and can be customized with a variety of toppings.', prep_time: '00:10:00.000', cook_time: '00:20:00.000' } ]``` – Strawzy Feb 26 '23 at 22:56
  • I see. And what if, in the node code, you try to log a property of of one of these `RowPacketData` objects, like `console.log(rows[0].recipe_name)` ? – 76484 Feb 26 '23 at 23:41
  • @76484 This prints undefined and something I realised is that it starts with RowDataPacket, would this make the data different if it was printed in the handlebars code? – Strawzy Feb 27 '23 at 17:40
  • There is something with that `RowDataPacket` object which doesn't allow accessing properties like `rows[0].recipe_name`. There is discussion [here](https://stackoverflow.com/q/31221980/3397771) which looks relevant. It is suggesting using `JSON.parse(JSON.stringify(rows))` - but I would think (hope) there is a prettier way of doing this. – 76484 Feb 27 '23 at 18:05

0 Answers0