CODEWITHSUNDEEP
javascriptjqueryjsonmustache
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to render mustache js from json

I have a json with the following format. I want to fill that json in view using mustache js.

Json Format

Image

Code for rendering json is

render: function () {
    var tmplData = self.jsonArrayFull;
    var out = Mustache.render(self._dashboardTemplate(), tmplData);
    self.element.html(out);
}

_dashboardTemplate: function () {
            var template = '<div id="layoutContainer" style="background-color:{{backgroundColor}}"></div>';
            return template;
        },

How can I do this? Its rendering null. Please help..

Upvotes: 0

Views: 834

Answers (1)

Ian Routledge
Ian Routledge

Reputation: 4042

Your problem comes from the fact that tmplData is an array, not an object, so when your template looks for {{backgroundColor}}, that is a backgroundColor of array, which doesn't exist.

To solve this, either pick the first item in the array to pass to Mustache.render ie: 

Mustache.render(self._dashboardTemplate(), tmplData[0])

Or put a loop into your template to render each array item like:

var template = '{{#.}}<div id="layoutContainer" style="background-color:{{backgroundColor}}"></div>{{/.}}';

See this question: Can mustache iterate a top-level array? for details about rendering a top level array.

Upvotes: 1

Related Questions