Given an array of objects, I would like to use one property of a nested object to look up various properties in an associated object in Handlebars.

In this example, I would like to show a list of students at each university, and information about the department to which each student belongs.

My code works, but the nested lookups are very repetitive:

{{lookup (lookup ../majors major) 'dean'}}
{{lookup (lookup ../majors major) 'location'}}

Is there anything I can do about this? I'd like to do access the context of the lookup, something like this:

{{#lookup ../majors major}}
    {{dean}}
    {{location}}
{{/lookup}}

var source = $("#hb-template").html();
var template = Handlebarspile(source);
var html = template(context);
$("#hb-html").html(html);

<script src=".1.1/jquery.min.js"></script>
<script src=".js/4.0.6/handlebars.min.js"></script>

<script id="hb-template" type="text/x-handlebars-template">
  {{#universities}}
  <h1>{{name}}</h1>
  {{#students}}
  <h2>{{name}}</h2>
  <dl>
    <dt>Major</dt>
    <dd>{{major}}</dd>
    <dt>Department dean</dt>
    <dd>{{lookup (lookup ../majors major) 'dean'}}</dd>
    <dt>Department location</dt>
    <dd>{{lookup (lookup ../majors major) 'location'}}</dd>
  </dl>
  {{/students}}
  {{/universities}}
</script>

<div id="hb-html">
</div>

<script>
  var context = {
    "universities": [{
        "name": "Example University",
        "students": [{
            "name": "Alice",
            "major": "Business"
          },
          {
            "name": "John",
            "major": "English"
          }
        ],
        "majors": {
          "English": {
            "dean": "Dr. Smith",
            "location": "Room 101"
          },
          "Business": {
            "dean": "Dr. Jones",
            "location": "Room 999"
          }
        }
      },
      {
        "name": "Another University",
        "students": [{
          "name": "Bob",
          "major": "Business"
        }],
        "majors": {
          "Business": {
            "dean": "Dr. Zimmerman",
            "location": "South Campus"
          }
        }
      }
    ]
  };
</script>

Given an array of objects, I would like to use one property of a nested object to look up various properties in an associated object in Handlebars.

In this example, I would like to show a list of students at each university, and information about the department to which each student belongs.

My code works, but the nested lookups are very repetitive:

{{lookup (lookup ../majors major) 'dean'}}
{{lookup (lookup ../majors major) 'location'}}

Is there anything I can do about this? I'd like to do access the context of the lookup, something like this:

{{#lookup ../majors major}}
    {{dean}}
    {{location}}
{{/lookup}}

var source = $("#hb-template").html();
var template = Handlebars.pile(source);
var html = template(context);
$("#hb-html").html(html);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<script id="hb-template" type="text/x-handlebars-template">
  {{#universities}}
  <h1>{{name}}</h1>
  {{#students}}
  <h2>{{name}}</h2>
  <dl>
    <dt>Major</dt>
    <dd>{{major}}</dd>
    <dt>Department dean</dt>
    <dd>{{lookup (lookup ../majors major) 'dean'}}</dd>
    <dt>Department location</dt>
    <dd>{{lookup (lookup ../majors major) 'location'}}</dd>
  </dl>
  {{/students}}
  {{/universities}}
</script>

<div id="hb-html">
</div>

<script>
  var context = {
    "universities": [{
        "name": "Example University",
        "students": [{
            "name": "Alice",
            "major": "Business"
          },
          {
            "name": "John",
            "major": "English"
          }
        ],
        "majors": {
          "English": {
            "dean": "Dr. Smith",
            "location": "Room 101"
          },
          "Business": {
            "dean": "Dr. Jones",
            "location": "Room 999"
          }
        }
      },
      {
        "name": "Another University",
        "students": [{
          "name": "Bob",
          "major": "Business"
        }],
        "majors": {
          "Business": {
            "dean": "Dr. Zimmerman",
            "location": "South Campus"
          }
        }
      }
    ]
  };
</script>

• javascript
• handlebars.js
• template-engine

1 Answer 1

Here is my solution: use the {{#with}} helper and pass it the result of the lookup subexpression—an object. I'm not sure if this is the best method, or really why this works, so would appreciate ments.

{{#with (lookup ../majors major)}}
    <dt>Department dean</dt>
    <dd>{{dean}}</dd>
    <dt>Department location</dt>
    <dd>{{location}}</dd>
{{/with}}

Full example:

var source = $("#hb-template").html();
var template = Handlebars.pile(source);
var html = template(context);
$("#hb-html").html(html);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<script id="hb-template" type="text/x-handlebars-template">
  {{#universities}}
  <h1>{{name}}</h1>
  {{#students}}
  <h2>{{name}}</h2>
  <dl>
    <dt>Major</dt>
    <dd>{{major}}</dd>
    {{#with (lookup ../majors major)}}
    <dt>Department dean</dt>
    <dd>{{dean}}</dd>
    <dt>Department location</dt>
    <dd>{{location}}</dd>
    {{/with}}
  </dl>
  {{/students}}
  {{/universities}}
</script>

<div id="hb-html">
</div>

<script>
  var context = {
    "universities": [{
        "name": "Example University",
        "students": [{
            "name": "Alice",
            "major": "Business"
          },
          {
            "name": "John",
            "major": "English"
          }
        ],
        "majors": {
          "English": {
            "dean": "Dr. Smith",
            "location": "Room 101"
          },
          "Business": {
            "dean": "Dr. Jones",
            "location": "Room 999"
          }
        }
      },
      {
        "name": "Another University",
        "students": [{
          "name": "Bob",
          "major": "Business"
        }],
        "majors": {
          "Business": {
            "dean": "Dr. Zimmerman",
            "location": "South Campus"
          }
        }
      }
    ]
  };
</script>