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

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.