Changing {{#each session.user.notification.notidata.[0]}} to this: {{#each session.user.notification.notidata}} worked on my sample web-application which I created to mock your web application set-up. For simplicity sake, I mocked out a session object: (from your UserSchema and example notidata array) and created a simple handlebar template containing a list using the data.properties you desire (para, and heading). The HTML in this case doesn't matter as it could be anything, the point is just to show that {{#each}} handlebarjs annotation worked as expected within your template. I suspect the problem is in your notification array and for one reason or another this array only contains 1 element. Pasted below is the relevant files of the sample web application, to see the whole sample project please look here: https://github.com/nathanwright1242/handlebarTest.
Index.html (notice the handlebarjs template hook: handlebarsTmpl)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Handlebarjs Templating example</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div id='handlebarHook'></div>
</head>
<body>
<script id="handlebarsTmpl" type="text/template">
<div>
{{#each session.user.notification.notidata}}
<ul class="list-group">
<li class="list-group-item">{{data.heading}}</li>
<li class="list-group-item">{{data.para}}</li>
</ul>
{{/each}}
</div>
</script>
<!-- bootstrap4 dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- backbonejs dependencies -->
<script src='js/lib/underscore-min.js'></script>
<script src='js/lib/backbone-min.js'></script>
<!-- handlebarsjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<!-- normal app separation -->
<script src='js/views/HandleBarView.js'></script>
<script src='js/app.js'></script>
</body>
</html>
HandleBarView.js (View that will populate the handlebar template with dynamic data from your session object)
var app = app || {}
app.HandleBarView = Backbone.View.extend({
el: '#handlebarHook',
template: $('#handlebarsTmpl').html(),
initialize: function(notidata){
this.notidata = notidata;
this.render();
},
render: function(){
let templateScript = Handlebars.compile(this.template);
this.$el.html(templateScript( this.notidata ));
return this;
}
});
app.js (Entry point in the web app, passing in the session object: mocked the same as your schema and example data)
var app = app || {};
$(function() {
let data = {
session: {
user: {}
}
};
data.session.user = {
'username': 'testuser',
'email': 'test@gmail.com',
'password': 'password',
'company': 'myCompany',
'contact': 1234,
'country': 'United States',
'isLoggedIn': true,
'createdOn': '2018-09-27T22:59:41.655Z',
'ads': [],
'notification': {
'counter': 1,
'notidata': [
{ data: { heading: 'Welcome edited', para: 'MaujouharatMarketPlace welcomes you!' }, read: false, itemdate: '2018-09-27T22:59:41.655Z' },
{ data: { heading: 'This is second notification', para: 'yes man' }, read: false, itemdate: '2018-09-27T22:59:41.655Z' }
]
}
};
new app.HandleBarView(data);
});
Result: (Verification of code by viewing the project's index file)
