Unable to render a Mustache template

Question

I have a template like:

{{#items}}
    <div id="{{dataId}}">
        <p>{{firstName}}</p>
        <p>{{sex}}</p>
    </div>
{{/items}}

and an array of objects retrieved from server:

dataId : 128  firstName : 'john'  sex : 'Male'
dataId : 203  firstName : 'doe'  sex : 'Female'
..

I am trying to render it using Mustache template with render() like:

success: function(items){ 
    var template = $('#movie_template').html();     --- step 1
    var output = Mustache.render(template, items);  --- step 2
    $('#movie_template').html(output);              --- step 3
}

The problem is that the render function is returning blank string as output rather than rendered html (step 2).

Note: Printing the ajax result in console log, gives Array[12] as output.

Answer 1

You are getting array of object, but mustache needs object to render your template. And you are updating the script tag which is hidden element, it would not display any html on the page. I added new div and working fine now. Here is the working JSFIDDLE

Mustache.render(template, {items:items});