Question

I am attempting to present a JSON collection, which is retrieved asynchronously and using FireBug I can see this ultimately looks like:

[{"Id":"00000010"},{"Id":"00000002"},{"Id":"00000003"}]

This does not work, but if I declare a collection as:

[{ "Id": "00000004" }, { "Id": "00000005" }, { "Id": "00000006"}]

This works, and then using FireBug I can see this is slightly different:

[Object { Id="00000004"}, Object { Id="00000005"}, Object { Id="00000006"}]

Why does it make a difference when retrieving the data synchronously and declaring a collection? What are my options for getting this to work.

Thanks.

UPDATE

I am also using sammy.js, here is the JavaScript:

var app = $.sammy('div[role="main"]', function () {

    this.use('Mustache', 'html');

    this.get('#/', function (context) {
        this.load('/data')
            .then(function (response) {

                context.blah = 'blah';
                context.data = response;

                var data2 = [{ "Id": "00000004" }, { "Id": "00000005" }, { "Id": "00000006"}];
                context.data2 = data2;

                var templateUrl = '@Url.Content("~/Templates/template.html")';

                context.partial(templateUrl);
            });
    });
});

$(function () {
    app.run('#/');
});

Here is the template:

<h1>{{blah}}</h1>
<ul>
{{#data}}
<li>{{Id}}</li>
{{/data}}
</ul>
<ul>
{{#data2}}
<li>{{Id}}</li>
{{/data2}}
</ul>

Answer 1

Okay, I figured this one out!

context.data = response;

becomes

context.data = JSON.parse(response);