Iterating over array of objects in Handlebars

Question

I'm actually doing this in a JSON object but for this question, I will simplify. I can't seem to get my Handlebars template to build correctly. Here is a sample array of objects that I am passing:

    var data = {
        DocumentInfo: [
            {
                Category: "General",
                DocumentList: [
                    {
                        DocumentName: "Document Name 1 - General",
                        DocumentLocation: "Document Location 1 - General"
                    },
                    {
                        DocumentName: "Document Name 2 - General",
                        DocumentLocation: "Document Location 2 - General"
                    }
                ]
            },
            {
                Category: "Unit Documents",
                DocumentList: [
                    {
                        DocumentName: "Document Name 1 - Unit Documents",
                        DocumentList: "Document Location 1 - Unit Documents"
                    }
                ]
            },
            {
                Category: "Minutes"
            }
        ]
    };

Here is the Handlebars template and Div where it's going:

<div id="DocumentResults"></div>

<script id="document-template" type="text/x-handlebars-template">
    <div>
        {{#if DocumentInfo}}
            {{#DocumentInfo}}
                {{#Category}}
                    <div class="row">
                        <div class="col-md-12">
                            <h2>{{this}}</h2>
                            {{#DocumentList}}
                                <p>{{DocumentName}} at {{DocumentLocation}}</p>
                            {{/DocumentList}}
                        </div>
                    </div>
                {{/Category}}
            {{/DocumentInfo}}
        {{else}}
            <p>There are no documents available at this time</p>
        {{/if}}
    </div>
</script>

Finally, here is the JavaScript that builds the Handlebars output:

    var source = $.trim($("#document-template").html());
    var template = Handlebars.compile(source);
    var $docData = $(template(data));
    $("#DocumentResults").empty().append($docData);

The problem is, the only thing that is generated are the header fields. Why won't it iterate over my other array (DocumentList) for each Category? And, the only way I can get the header values to display is to use {{this}}. If I replace it with {{Category}} nothing displays. I can't see what it is that I'm doing wrong here.

I'm confused about that. I would think that there were actually three loops. One for DocumentInfo, one for Category and one for DocumentList. I've tried it with {{#each DocumentInfo}}, {{#each Category}} and {{#each DocumentList}} and I get the same result. What am I missing relating to a loop inside the template? — Randy Braze, Sep 25 '13 at 22:28

score 0 · Accepted Answer · answered Sep 26 '13 at 07:44

0

Check this jsfiddle: http://jsfiddle.net/KPCh4/

var source = $("#document-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$('#DocumentResults').html(html);

I were still focused on {{#each}} for iteration; # is a shortcut actually. Do not confuse {{Category}} and {{#Category}}. The former output a property's value; the latter is a list (see the #).

I let you fine-grained the snippet :)

Hope this helps,

R.

answered Sep 26 '13 at 07:44

roland

7,695
6
46
61

Roland, thanks. I see the fiddle worked fine but I don't understand why removing the block helper for {{#Category}} was necessary. I don't mistake the {{#Category}} for {{Category}}. {{#Category}} is a block helper used to iterate over the block Category. {{Category}} should display the value of Category. I think our functions, however, do the same thing. I know that it works the way I did it originally, as I have that code already running in production. It seems the change to the template was what was needed. I'll play with my template and see what I can generate (correctly, I hope). Thanks. – Randy Braze Sep 26 '13 at 18:31
1

Well, I'll be dipped in hot wax! Those minor changes to the template were what was needed. I still don't quite understand why removing the {{#Category}} block was necessary but who am I to argue with success? I guess I'd better read up on that stuff again. Thought I understood it fairly well, until now. Thanks, again!! – Randy Braze Sep 26 '13 at 18:39
Category is not an array, only array/list can be prefixed with #. {{Category}} returns a single string in this case. Glad I helped you out! :) – roland Sep 26 '13 at 19:31

Iterating over array of objects in Handlebars

1 Answers1

Linked