access object property in handlebar contains '.'

Question

I am getting data from service in which array of objects are coming 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.

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}}