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

score 3 · Answer 1 · edited May 23 '17 at 12:33

3

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 "/".

edited May 23 '17 at 12:33

Community

1
1

answered Apr 02 '13 at 16:37

marty

466
5
18

I am not able to make it work, any other setting you guys suggest – Matt Sep 02 '13 at 13:07
Finally found a simple work around suggested in the following link by Amit, http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of – Matt Sep 02 '13 at 15:19
Just take your web service data and add a parent node like this. mustacheFormattedData = { 'parenkey' : web service data }; – Matt Sep 02 '13 at 15:20

Matt · Answer 2 · 2016-01-05T15:49:36.543

The line data = { 'roles': data }; is the most crucial. Its attaching the key to the data returned by web api or any other source of data like pagemethods or 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);

        }
    });

Few of my articles on the MustacheJs can be found here

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

Master Details Grid on Demand data loading : Using Mustache.JS http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/

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

score 0 · Answer 3 · answered Aug 06 '12 at 03:18

0

short answer: YES

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

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

answered Aug 06 '12 at 03:18

gonchuki

3,808
19
32

Thanks for the answer @gonchuki, so far the only problem I see is the way that JSON.net is serializing my object, since it doenst wrap it around a parent node. – user1577704 Aug 06 '12 at 17:28
in the general case, you can wrap your array into an anonymous object before getting it through the JSON serializer so that when deserializing you have an object with just one key (let's say `repo`) which contains the array you want to use on your template. – gonchuki Aug 07 '12 at 12:44

Mustache JS Template with JSON Collection

3 Answers3

Linked

Related