asp.net - Mustache JS Template with JSON Collection

Question

Hi this is my first attempt to use MustacheJS with a JSON webservice in .net

Currently I am struggling I can't seem to find what I am doing wrong setting this basic example:

My Webservice is returing the following string:

[
  {
    "ShortDescription":"BOX",
    "Description":"BOXING",
    "Id":1
  },
  {
    "ShortDescription":"EPL",
    "Description":"ENGLISH PREMIER LEAGUE",
    "Id":2
  }
]

I have validated its syntax with this website: http://json.parser.online.fr/

and here is the HTML code I am using:

google.load("jquery", "1");
google.setOnLoadCallback(function () {
    $(document).ready(
        function () {

            $.ajax({
                url: "../data.asmx/geteagues",
                type: "POST",
                dataType: "json",
                data: "",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var template = "<h1>{{ShortDescription}} {{Description}}</h1>";
                    var html = Mustache.render(template, data);
                    $('#sampleArea').html(html);
                    alert(html);
                }
            })

        }
    )
});

I am posting the whole JS code, since I am not very good with javascript, basically I want to load always the latest JQuery version from google and then work my WS call.

The problem so far is that when I place a breakpoint in the following line:

 var html = Mustache.render(template, data);

I see that the template is setn ok, and so does the data, same value as I posted above, but the .render function is returning:

I seems It didnt like the data.

So far all the examples I have seen for inline data come as the following structure:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" },
  ]
}

And then a template defined like this:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

But the only difference of that against my data is that I dont have a "parent" like "repo"

At server side, I am using a .net library called JSON.net and in the documentation of how are collections being serialized:

james.newtonking.com/projects/json/help/html/SerializingCollections.htm

the final result does not include the parent node's name, which I thing is missing from my Mustache Template definition:

[
  {
    "Name": "Product 1",
    "ExpiryDate": "2000-12-29T00:00Z",
    "Price": 99.95,
    "Sizes": null
  },
  {
    "Name": "Product 2",
    "ExpiryDate": "2009-07-31T00:00Z",
    "Price": 12.50,
    "Sizes": null
  }
]

Is this what I am missing? the "repo" parent node from my data so I can iterate my Template?

Thanks in advance for your time.

-ed

Answer 1

Per @stealth on this question Mustache.js: Iterate over a list received via json

    {{ #. }}
        <b>{{Name}}</b>
    {{ /. }}

Note the only difference from @stealth's answer is a "#" instead of "/".