How do I use an handlebars #each call for an object with arrays of objects?

Question

So I have an object that's structured like this:

menu = {
  classic: [
    {p1: ..., p2: ...}, {p1: ..., p2: ...}
  ],
  classic2: : [
    {p1: ..., p2: ...}, {p1: ..., p2: ...}
  ]
}

An object where each value is an array of objects. How do I use an handlebars #each call to get to menu.classic[0].p1, for example? Can I nest multiple #each calls to iterate over every array index in every object value?

Answer 1

Use nested {{#each}} blocks.

Here you will see both classic and classic2 rendered into <ul>s with corresponding p1 properties rendered into <li>s using this approach.

The first example builds the menus imagining p1 holds a URL and p2 holds the text for the link. That each goes into an <a> tag with in the <li>.

let menu = {
  classic: [
    {p1: 'URL1', p2: 'classic link1'}, {p1: 'URL2', p2: 'classic link2'}
  ],
  classic2:  [
    {p1: 'URL3', p2: 'classic2 link1'}, {p1: 'URL4', p2: 'classic2 link2'}
  ]
};

const ul = `
<div>
  {{#each this}}
  <ul class="menu">
    {{#each this}}
    <li><a href="{{this.p1}}">{{this.p2}}</a></li>
    {{/each}}
  </ul>
  {{/each}}
</div>`;

let template = Handlebars.compile(ul);
console.log(template(menu));

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

In a table:

let menu = {
  classic: [
    {p1: 'classic test', p2: 'classic test'}, {p1: 'classic test', p2: 'classic test'}
  ],
  classic2:  [
    {p1: 'classic2 test', p2: 'classic2 test'}, {p1: 'classic2 test', p2: 'classic2 test'}
  ]
};

const table = `
  {{#each this}}
<table>
  {{#each this}}
  <tr>
    {{#each this}}
    <td>{{this}}</td>
    {{/each}}
  </tr>
  {{/each}}
</table>
{{/each}}`;

let template = Handlebars.compile(table);
console.log(template(menu));

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>