Render multiple JSON objects using jsRender

Question

I want to return data that consists of a JSON object with two sub objects. On the client I want to be able to use a jsRender {{for}} construct to loop through only one particular object at a time.

I am able to render everything without using {{for}} but I'd like to use {{for}}.

So why doesn't this work?

<script id="progDetailsTemplate" type="text/x-jsrender">
    {{for Programmes}}{{!-- Why won't this work? -->}}
    <tr><td>{{>GroupName}}</td></tr>
    {{/for}}
   </script>

this however does work:

<script id="progDetailsTemplate" type="text/x-jsrender">
    <tr><td>{{>GroupName}}</td></tr>
   </script>

It's possible that other objects could have the same property called 'GroupName' which is why I'd like help with this.

I have created a jsFiddle so you can see the example here: http://jsfiddle.net/SNSXs/1/

dugokontov dugokontov · Accepted Answer · 2013-05-16T12:28:54

As far as I can see, your problem is with the object you pass to render method. You passed dataResults.Programmes and tried to access Programmes property. What you needed to do is pass dataResults and it will work.

I made changes on your jsfiddle example. The only change is in call method:

function BuildProgs() {
    $("#progTable").append(
            $("#progDetailsTemplate").render(dataResults)
        );
}

Also, on side note on your js code standard. Let your left curly brace { be placed in same line as function name. This is a good read about javascript code conventions

Render multiple JSON objects using jsRender

1 Answers