how to list this array in hbs?-CodePudding

iam trying to list this ingredients Array

ingredients:Array in DB

ingredients:Array
0:"Tapioca / Kappa - 1 medium"
1:"Gram Flour / Kadala Mavu - 1 Cup"
2:"Rice Flour - 1/2 Cup"
3:"Turmeric Powder - 1 or 2 pinch"
4:"Chilly Powder - 1 Tspn"

etc..

here, I am trying to list the ingredients but not getting line by line how to solve this,

recipe.hbs

<div >
            <div >
                <h4>Ingredients</h4>
                <ul >
                    {{#each recipe}}
                    <li  style="pre-line">{{ingredients}}</li>
                    {{/each}}
                </ul>
            </div>
        </div>

submit-recipe.hbs

<div >
      <label for="name" >Ingredients</label><br>
      <small>Example: Ice</small>
      <div >
        <div >
          <input type="text" name="ingredients" >
        </div>
      </div>
    </div>

this is the submit form

GET /recipe/:id
Recipe

recipeController.js

     exports.exploreRecipe = async(req, res) => {
          try {
            let recipeId = req.params.id;
            const recipe = await Recipe.findById(recipeId);
            res.render('recipe', {recipe} );
          } catch (error) {
            res.status(500).send({message: error.message || "Error Occured" 
          });
          }
        }

recipe-Schema.js

const mongoose = require('mongoose');

const recipeSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  ingredients: {
    type: Array,
    required: true,
  },
  category: {
    type: String,
    enum: ['Breakfast', 'Snacks', 'variety_dish', 'Lunch'],
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
});
recipeSchema.index({ name: 'text', description: 'text' });
// WildCard Indexing
//recipeSchema.index({ "$**" : 'text' });

module.exports = mongoose.model('recipes', recipeSchema);

this is recipeSchema model

CodePudding user response：

Seems like ingredients is a property of recipe so you have to use recipe.ingredients. Also, {{this}} is used to display the item of the array.

<div >
  <div >
    <h4>Ingredients</h4>
      <ul >
        {{#each recipe.ingredients}}
          <li  style="pre-line">{{this}}</li>
        {{/each}}
      </ul>
    </div>
  </div>