Search code examples
javascriptc#handlebars.js

Handlebars display list of strings from object


Trying to display list of strings inside the template after retrieving data as JSON.

 public class AutoCompSearchResult
  {
    public List<string> eventName = new List<string>();    
  }

The problem is that I need to display one by one on the list, but it displays all list between

<li> tags:
<li>EVENTS</li>
{{#each this}}
<li style="list-style: none">{{eventName}} -- </li>
{{/each}}

I have tried similar solutions https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-Dynamic-Content but this does not output the data for my case since, I do not know the syntax for handlebars js using:

{{#each eventName}}
<li style="list-style: none">{{this}} -- </li>
{{/each}}

I want final result to be:

<ul>
 <li>Item1</li>
<li>Item2</li>
    ...
</ul>

Chrome console of data passed: eventName

[Object
    eventName:Array[2]
    0:"Dr. Dog"
    1:"Laura Gibson"
    __proto__
    :
    Array[0]
    __proto__
    :
    Object

Solution

  • Finally figured out:

        <ul>
            <li>EVENTS</li>
            {{#each this.[0].eventName}}
            <li style="list-style: none">{{this}} -- </li>
            {{/each}}
    

    I had to use this.[0] to access the object and then iterate over member variable: eventName