Cannot loop through multidimensional array with handlebars

Question

Looking at my data that is coming through:

data: {
    content: [
    [
    "School Name",
    "Location",
    "Type",
    "No. eligible pupils",
    "Average points per student",
    "Average points per exam entry",
    "% obtaining two facilitating subjects"
    ],
    [
    "Colchester Royal Grammar School",
    "Colchester",
    "State",
    "349",
    "1428",
    "263.3",
    "77%"
    ], and so on...
 ]
}

I am trying to loop through this array of arrays, to create a table. So for each array I would need to wrap it in <tr></tr> and for each element inside every array I need it wrapped in a <td></td>. I will need to differentiate the first row to use <thead> and <th> as well but at the moment I am trying to get my head around the proper structure.

What my code does is create only one <td> containing the whole thing, rather than multiple <tr>s or <td>s.

        {{#each data.content}}

            <tr>

                {{#each this}}
                    <td>{{ this }}</td>
                {{/each}}

            </tr>

        {{/each}}

data: [ content: []] this syntax is wrong. shouldn't it be data: { content: [] }? — Venugopal
– Venugopal, Commented Jan 15, 2016 at 10:31
data: { content: [ [ "School Name", "Location", "Type", "No. eligible pupils", "Average points per student", "Average points per exam entry", "% obtaining two facilitating subjects" ], [ "Colchester Royal Grammar School", "Colchester", "State", "349", "1428", "263.3", "77%" ], and so on... } your data should be object — sundar
– sundar, Commented Jan 15, 2016 at 10:37
I just amended the data to look exactly like the output.. any ideas now? — geodeath
– geodeath, Commented Jan 15, 2016 at 10:39

sundar · Accepted Answer · 2016-01-15 11:45:40Z

4

you cannot directly use data inside your template.because you are passing data object to compiled template function.so you should use this to refer current context.

better use block parameters to avoid more number of this reference.which will make the code less understandable

without block parameters

{{#each this.content}} 
     <tr>
        {{#each this}} 
            <td>{{ this }}</td> 
        {{/each}} 
     </tr>
 {{/each}}

by using block parameters,

{{#each this.content as | rowKey, row |}} 
         <tr>
            {{#each row as | colKey, column|}} 
                <td>{{ column }}</td> 
            {{/each}} 
         </tr>
 {{/each}}

it has more advantages when the template grows bigger

edited Jan 15, 2016 at 11:45

answered Jan 15, 2016 at 11:29

sundar

4083 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Cannot loop through multidimensional array with handlebars

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related