Nested iterations and variable scope

[rvangundy]

I'm trying to render tables, with the constraint that both my rows and columns are dynamically generated. I'm imagining a template that looks like this:

<table>
  <tr><th>Toons</th>
  {{#each arr1}}
    <th>{{name}}</th>
  {{/each}}
  </tr>
  {{#each rowName}}
  <td>{{this}}</td>
  {{#each arr1}} <!-- Can't quite do this as I am in the rowName context -->
  <td>
    {{[rowName??]}}  <!-- What to put here? -->
  </td>
  {{/each}}
  {{/each}}
</table>
{{/each}}

... Basically both the row header and column header are used as keys to index in to a value within an object. Using Javascript, I might achieve this by:

var arr = [
  {
    name: "Foghorn Leghorn",
    species: "Chicken",
    series: "Looney Tunes",
    creator: "Robert McKimson"
  },
  {
    name: "Betty Boop",
    species: "Human",
    series: "Talkaratoon",
    creator: "Max Fleischer"
  }
];

var rows = ["series", "creator"];
var html = "<table><tr><th>Toons</th>";

// Populate column headers
for (var i = 0, len = arr.length; i < len; i += 1) {
  html += "<th>" + arr[i].name + "</th>";
}

html += "</tr>";

// Create table rows
for (var j=0, len=rows.length; j < len; j += 1) {

  // Row header
  html += "<tr><th>" + rows[j] + "</th>";

  for (var k=0, len=arr.length; k < len; k +=1) {
    html += "<td>" + arr[k][rows[j]] + "</td>";  // Using dynamic keys to select data
  }

  html += "</tr>";
}

html += "</table>";

Which would produce a table like this:

Toons	Foghorn Leghorn	Betty Boop
series	Looney Tunes	Talkaratoon
creator	Robert McKimson	Max Fleischer

Of course the point is to use some simple, flexible templating with reasonable helpers, and not do it all in Javascript. Does Handlebars support nested looping like this, with multiple indexes? Could this be implemented as a feature or helper?

Addendum: A portion of this seems to be addressed with #491. Going to investigate Handlebars 2.0 and see if I'm able to successfully perform the above...

[rvangundy]

I think I've got it, but had to create a modified "lookup" helper that extended its functionality a bit. While lookup works nicely if you're directly accessing the value you want printed, in my situation I needed to access a value within an object I'm looking up (more complex than my Toons example). Lookup works only on a single level. My helper handles additional arguments...

<table>
  <tr><th>Toons</th>
  {{#each arr1}}
    <th>{{name}}</th>
  {{/each}}
  </tr>
  {{#each rowName}}
  <td>{{this}}</td>
  {{#each @arr1}} <!-- Solved this by implementing a helper that stores options.data value -->
  <td>
    {{myLookup this ../this "keyA"}} <!-- handles multiple arguments for accessing nested values -->
  </td>
  {{/each}}
  {{/each}}
</table>
{{/each}}

myLookup...

Handlebars.registerHelper('myLookup', function(obj, field, options) {
    var value = obj;
    var fields = Array.prototype.slice.call(arguments, 1, arguments.length - 1);

    fields.forEach(function(field) {
        value = value[field];
    });

    return obj && value;
});

Perhaps this is an edge case but I can spruce up the above and make a PR if this is desired functionality for the lookup helper.

[kpdecker]

In the 2.0 codeline we have the lookup helper, which should suit your needs here. This still needs to be documented so #569 is you best source of details on that right now.