Dynamic loops in Meteor with nested #each?

Question

I have a datasheet parsed from CSV to JSON by Papaparse, which I want to show dynamicly in a table. The data array looks like this, which is fresh from Papaparse:

data: {
  0 {
    _id: "",
    Testcol: "cellvalue",
    Testcol2: "cellvalue2"
  },
  1 {
    ...
  }
}

I am now struggling to get this into HTML, since I do not know the values, since they are dynamic, I cant assume any name of the values.

I have tried the following:

<table class="table table-striped">
    <thead>
        <tr>
            {{#each projectData.meta.fields}}
                <th>{{this}}</th>
            {{/each}}
        </tr>
    </thead>
    <tbody>

        {{#each row in projectData.data}}
            <tr>
                {{#each row}}
                    <td>
                        {{this}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}

    </tbody>
</table>

But I get this error: Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values.

How do I do this properly? I hope someone can point me in the correct direction.

score 1 · Answer 1 · edited May 23 '17 at 10:28

I actually got it to work right now, found something useful by using a helper to convert the object into key/values.

How to print key and values in Meteor Template?

The helper:

Template.registerHelper("objectToPairs",function(object){
  return _.map(object, function(value, key) {
    return {
      key: key,
      value: value
    };
  });
});

The modified #each block:

        {{#each row in projectData.data}}
            <tr>
                {{#each objectToPairs row}}
                    <td>
                        {{value}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}

If this is not the best way, please advise.

Dynamic loops in Meteor with nested #each?

1 Answers1