Cannot Generate Mustache HTML From Array

Question

var self = this;
self.filters = {
    genres: [],

    ...

};
self.getLibrary = function() {
    $.getJSON("library.json", function(data) {
        for (var i=0, l=data.filters.genres.length; i<l; i++) {
            self.filters.genres.push({genre: data.filters.genres[i]});
        }

        ...

        $.each(self.filters, function(k1,v1) {
            var tmpl = "{{#" + k1+ "}}{{" + k1.slice(0, -1) + "}}{{/" + k1 + "}}";
            var html = Mustache.render(tmpl, self.filters[k1]);
            $("#" + k1).html(html);
        });

        ...

        }
    });
};

Logging the tmpl variable results in the following:

{{#genres}}{{genre}}{{/genres}}

Logging self.filters[k1] results in an array like so:

[
    {genre: "Ambient"},
    {genre: "Bass"},

    ...

]

Logging the html variable results in a blank string.

How do I fix this?

Answer 1

Finally solved the problem:

var html = Mustache.render(tmpl, self.filters[k1]);

=>

var html = Mustache.render(tmpl, self.filters);