CODEWITHSUNDEEP
node.jsexpresshandlebars.js
Prashant Mall
Prashant Mall

Reputation: 37

How to give div id from the database using handlebars?

So I am writing a node code with hbs template. I want to give div id from the database as you can see in <a href= "#{{content1[0].content_heading}}" class="more">Learn More</a> line in hbs code below. The problem is when I am passing the whole object that is like "#{{content1}}" it is working and passing the whole object as data.

But when I am using content1[0] to target the 0th element it is showing an error Error: 

Error: E:\Monter\Project\node.js\third-page\full-project\views\basic-page.hbs: Parse error on line 35:
...iv>          <a href= "#{{content1[0].content_
----------------------^

Node code:

// TO GET 'id' data in HBS for BASIC.
app.get('/:id/basic', (req, res) => {
  var id = req.params.id;
  var encoded = encodeURI(id);

  console.log(id);

  basicModel.findOne({"basic_page.navbar_header":id}).then((BasicModel) => {
    if (BasicModel === null) {
      res.send('Sorry, the page you have requested does not exsist.');
      return res.status(404).send();
    }
    console.log(typeof(BasicModel.basic_page.content1[0].content_heading));
    res.render('basic-page.hbs', {
      id: encoded,
      down_arrow_link: BasicModel.basic_page.content1[0].content_heading,
      navbar_header: BasicModel.basic_page.navbar_header,
      header_image_name: BasicModel.basic_page.header_image_name,
      content1: BasicModel.basic_page.content1,
      content2: BasicModel.basic_page.content2
    });
    // console.log(DescriptionModel);

  }).catch((e) => {
    res.status(400).send();
  });
});

HBS Code: 

<section id="banner" class="bg-img" data-bg="{{id}}/{{header_image_name}}">
    <div class="inner">
        <header>
            <h1>Basic Skill</h1>
        </header>
    </div>
    <a href= "#{{content1[0].content_heading}}" class="more">Learn More</a>
</section>

Schema:

var basicSchema = new Schema({
  basic_page: {
      navbar_header: {type: String, required: true, trim: true, minlength: 1, index: ({header:1}, {unique: true}), unique: true},
      header_image_name: {type: String, required: true, trim: true},
      content1: [
        {
          content_heading: {type: String, required: true, trim: true},
          content_data: {type: String, required: true, trim: true},
          subcontent: [
            {
              subcontent_heading: {type: String, required: true, trim: true},
              subcontent_data: {type: String, required: true, trim: true},
              subcontent_image_name: {type: String, required: true, trim: true}
            }
          ]
        }
      ],
      content2: [
        {
          content_display_number: {type: Number, required: true, trim: true},
          content_heading: {type: String, required: true, trim: true},
          content_data: {type: String, required: true, trim: true},
          subcontent_image_name: {type: String, required: true, trim: true}
        }
      ]
    }
  })

Upvotes: 0

Views: 550

Answers (2)

Gibin Ealias
Gibin Ealias

Reputation: 2859

It should be <a href= "#{{content1.[0].content_heading}}" class="more">Learn More</a>

You missed the dot . before the array index [0] (unlike the JS syntax).

Hope this helps.

Upvotes: 1

Don
Don

Reputation: 531

Try this

<a href= "#{{content1.0.content_heading}}" class="more">Learn More</a>

Upvotes: 0

Related Questions