Nested "{{for}}" issue? [jsRender]

Question

I am trying to put together a template with jsRender instead of my own version that I was on, but, I keep getting this: "Uncaught JsRender Error: Syntax error Unmatched or missing tag: "{{/for}}" in template:" followed by my entire template.

Here is a truncated version of my code, any ideas as to what is going on? Or is it just the nested for loops?

<div class="page" id="{{:info.id+info.name}}">
    {{for sources}}
    <header class="feed-title">
        <div class="feed-title-content">
            <span class="feed-title-text">{{:title}}</span>
        </div>
    </header>
    <section class="row">
        <div class="scroll-left"></div>
        <div class="row-scroll">
            {{for articles}}

                          // An if, else and some standard content insertion stuff is/was here

            {{/for}}
        </div>
        <div class="scroll-right"></div>
    </section>
    {{/for}}
</div>

Screenshot of chrome's dev tools showing my array structure:

Screenshot 1 of an expanded view:

And collapsed:

Any ideas as to what is going on?

EDIT: Forgot to mention, I am loading this from an external file using John Papa's code

EDIT: Demo and code:

Chrome's dev tools output of my array:

Object
    info: Object
    sources: Array[1]
        0: Object
            articles: Array[7]
                0: Object
                1: Object
                2: Object
                3: Object
                4: Object
                5: Object
                6: Object
            link: "http://lifehacker.com"
            title: "Lifehacker"

Demo: http://jsfiddle.net/SO_AMK/3J7AE/

And of a working nested array:

Object
    foo: "names"
    testData: Array[2]
        0: Object
            markup: "<span style='background: yellow'>John</span>"
            name: "John"
            secondary: Array[1]
                0: Object
                1: Object

Demo: http://jsfiddle.net/SO_AMK/Vf8Bq/

Answer 1

You are right, the problems seems to be your JavaScript object. I think the properties to loop over need to be arrays instead of objects. Your template works just fine with the testdata from the jsfiddle example you gave in the comments.

If that is not it: could you add a JSON serialization of your object? Your template seems to work: http://jsfiddle.net/6wcX8/1/

Answer 2

Looking at the jsfiddles, the issue was that tags in the section not actually shown in the code above, using {{if}} and {{else}}, didn't use the correct syntax:

They used:

{{for articles}}
    {{if img === false }}
        ...
    {{/if}}
    {{else}}
        ...
    {{/else}}
{{/for}}

instead of

{{for articles}}
    {{if img === false }}
        ...
    {{else}}
         ...
    {{/if}}
{{/for}}

See this demo sample of {{if}} and {{each}} tags.