JS Mustache Template with JSON Collection

Question

Hi, this is my first attempt to use MustacheJS with JSON web service in .net

I am currently struggling, I cannot find what I am doing wrong by setting this basic example:

My web service saves the following line:

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

I checked its syntax with this site: http://json.parser.online.fr/

and here is the HTML code that I use:

 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 sending all the JS code since I am not very good at javascript, basically I want to always download the latest version of JQuery from Google, and then work with my WS call.

The problem is that when I put a breakpoint on the following line:

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

I see that the template is installed normally, like the data, the same value as above, but the .render function returns:

I don't seem to like the data.

So far, all the examples I've seen for embedded data have the following structure:

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

And then the pattern is defined as follows:

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

But the only difference between this and my data is that I don’t have a “parent” type of “repo”

On the server side, I use the .net library called JSON.net and in the documentation on how collections are serialized:

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

The end result does not include the parent name node, which I do not see in 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 that what I am missing? parent "repo" node from my data so that I can repeat my pattern?

Thank you in advance for your time.

-ed

Answer 1

Per @stealth on this Mustache.js: Iterate a list retrieved via json

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

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

Answer 2

Line data = {'role': data}; is the most important. It attaches the key to the data returned by the web api or any other data source, such as pagemethods or a web service

 $.ajax({ dataType: "json", url: '/api/TestApi/GetAllRole', success: function (data) { data = { 'roles': data }; // formatting the data to support the mustache format var html = Mustache.to_html($('#RoleTemplate').html(), data); $('#tblRole').append(html); } }); 

Some of my MustacheJs articles can be found here.

INPUT FILTER FOR THE MAIN GRID USING MUSTACHEJS http://www.techguides.in/add-inline-filter-to-basic-grid-using-mustache/

Basic Information Loading grid data on demand: Using Mustache.JS http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/

Sorting grids using MustacheJs http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/

Answer 3

short answer: YES

long answer: for security reasons [1], you should in any case wrap your JSON-aray in an object. for Mustache or any other library, to have access to your array, you need to have at least one parent key on which you can create your iterator.
The "repo" key on your sample is an assistant that you need to tell the mustache to "go and iterate over the array that is inside the repo key", otherwise you won’t be able to tell the template what you want to output, where

[1] this is just one of many resources that you can find about why you need to wrap a JSON response in an object http://incompleteness.me/blog/2007/03/05/json-is-not-as- safe-as-people-think-it-is /