Use Handlebars lookup helper to access Object in array and output property

Question

I am using the handlebars lookup helper to lookup an object in an array based on the index.

Unfortunatelly I do not manage to output a property of the object.

HTML:

 <script id="entry-template" type="text/x-handlebars-template">
      <div class="entry">
        <h1>Employees</h1>
        <div class="body">
          <ul>
            <li> 1.Employee {{lookup this 0}}</li>
            <li> 2.Employee {{lookup this 1}}</li>
          </ul>
        </div>
      </div>
    </script>

    <div id="content">

    </div>

Javascript:

var employees = [ { name : 'Joe'}, { name : 'Bob'} ];

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

var html    = template(employees);

$('#content').append(html);

and jsfiddle: https://jsfiddle.net/sgu2mmdz/1/

This is a simplified example to demonstrate my problem. I am aware that there are simplier ways so output the name by using the each helper

Edit: This is an updated jsfiddle with a version, which is closer to what I need to achieve: https://jsfiddle.net/sgu2mmdz/6/

Nisarg Shah · Accepted Answer · 2017-07-26 16:56:07Z

1

You could access the array objects directly with this.<index>.<property>. So in your case it would be something like this.0.name to get the name from the first element in the employees array. Here's the updated fiddle: https://jsfiddle.net/sgu2mmdz/3/

I hope this is what you want. Of course, as you mention in the question, it can also be done using each.

Also, I would suggest that you use log to debug such issues. It can often help you identify what you are doing wrong.

var employees = [ { name : 'Joe'}, { name : 'Bob'} ];

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

var html    = template(employees);

$('#content').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
      <div class="entry">
        <h1>Employees</h1>
        <div class="body">
          <ul>
            <li> 1.Employee {{this.0.name}}</li>
            <li> 2.Employee {{this.1.name}}</li>
          </ul>
        </div>
      </div>
    </script>

    <div id="content">

    </div>

answered Jul 26, 2017 at 16:56

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

Hi @Nisarg, thanks for your reply. I provided a simplified example, but I think I really have to access the data via lookup. I updated my jsfiddle so it is a bit more similar to what I actually need to achieve... jsfiddle.net/sgu2mmdz/6

Nisarg Shah Over a year ago

I am not sure I understand your problem completely, but you could use with syntax. I just replaced {{lookup this @index}} with {{#with (lookup this @index)}}{{this.name}}{{/with}}, and it works. I'm not sure if this is the best way to do it though, because I have never run into such a problem. Here's the fiddle: jsfiddle.net/sgu2mmdz/7

Collectives™ on Stack Overflow

Use Handlebars lookup helper to access Object in array and output property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related