I am getting data from service in which array of objects are ing like below:-

    [{
        title : 'Tilte 1',
        s.no : 1
     },
     {
        title : 'Tilte 2',
        s.no : 2   
     }
    ]

I have used handlebars templating to parse this data like below:-

{{#each this}}
   <div>
      <span>{{this.s.no}}</span>
      <h2>{{this.title}}</h2>
   </div>
{{/each}}

In the above I am not able to access the property('s.no'). In vanilla JavaScript we can access it like this['s.no'] but in handlebars it's not working.

I am getting data from service in which array of objects are ing like below:-

    [{
        title : 'Tilte 1',
        s.no : 1
     },
     {
        title : 'Tilte 2',
        s.no : 2   
     }
    ]

I have used handlebars templating to parse this data like below:-

{{#each this}}
   <div>
      <span>{{this.s.no}}</span>
      <h2>{{this.title}}</h2>
   </div>
{{/each}}

In the above I am not able to access the property('s.no'). In vanilla JavaScript we can access it like this['s.no'] but in handlebars it's not working.

• javascript
• jquery
• json
• handlebars.js

• 1 {{this.[s.no]}} or {{this.["s.no"]}} try these two. – Irfan Ali Commented Apr 2, 2017 at 13:40

1 Answer 1

You need to use special [] notation for properties that are not valid handlebar identifiers. Demo.

{{#each this}}
   <div>
      <span>{{this.[s.no]}}</span>
      <h2>{{this.title}}</h2>
   </div>
{{/each}}