Strange effect "each this" in Template7 when i use JSON

Question

I'm working on a Framework7/Template7 dynamically loaded pages content. This work perfectly when im using static "context" in JSON format. But when i'd like to test it with real world data from API then i have strange effect. Below i paste working and not working code:

TEMPLATE (always the same):

    <script id="template" type="text/template7">
            <ul>
              {{#each this}}
              <li>{{id}} {{title}}</li>
              {{/each}}    
            </ul>    
    </script>

JS (working):

myApp.onPageInit('holidays', function (page) {

    var template = $$('#template').html();

    var compiledTemplate = Template7.compile(template);


    var context =
            [
                {
                  "userId": 1,
                  "id": 1,
                  "title": "quidem molestiae enim"
                },
                {
                  "userId": 1,
                  "id": 2,
                  "title": "sunt qui excepturi placeat culpa"
                },
                {
                  "userId": 1,
                  "id": 3,
                  "title": "omnis laborum odio"
                }
            ];

    var html = compiledTemplate(context);

    document.getElementById('holidays_tpl').innerHTML = html;
})

EFFECT (working):

1 - quidem molestiae enim 
2 - sunt qui excepturi placeat culpa 
3 - omnis laborum odio

JS (not working):

myApp.onPageInit('holidays', function (page) {

    var template = $$('#template').html();

    var compiledTemplate = Template7.compile(template);


    $$.get('https://jsonplaceholder.typicode.com/albums', function (json) {

        document.getElementById('holidays_tpl').innerHTML = compiledTemplate(json);

    });


})

EFFECT (bad):

-

-

-

...x500

-

---

API link is from portal with sample APIs.

I dont know why this not working with external JSON source?

Thanks!

Answer 1

Try JSON.parse(json) or JSON.stringify(json)