mustache js - Can't access array value using tables

Question

I am having a problem with Mustache.js accessing to the values of a json array and I need some help.

The problem is when I want to access to the values using a table. It always shows [object Object], when it should show the array content.

Below is a working and a non-working example:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
  <p>Works but not what I need:</p>
  <p>{{#numbers}} {{.}} {{/numbers}} </p>
  <p>Doesn't work:</p>
  <table>
      <tr>
        {{#numbers}} <th> {{.}} </th> {{/numbers}}
      </tr>
  </table>
</div>
<div id="rendered"></div>
<script>
var json = {
  "numbers": [ 1, 2, 3 ]
  };
var compiledTemplate = Mustache.to_html($('#template').html(), json).replace(/^\s*/mg, '');
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>

Output is:

Works but not what I need:
1 2 3
Doesn't work:
[object Object]

Is there any way to solve this problem or to print the object attributes using mustache.js?

The issue was already asked in their issue system, no replies yet: https://github.com/janl/mustache.js/issues/295

Thanks, Mariano.

score 4 · Answer 1 · answered Feb 20 '13 at 12:07

4

Finally, this is what I did.

Replaced the div element template, to a script element:

from <div id="template" style="display:none"> to <script id="template" type="text/x-mustache-template">

And worked as expected =)

answered Feb 20 '13 at 12:07

marianocifre

61
5

you also may have had problems with using mustache against jquery 1.9.1, take a look at: http://stackoverflow.com/questions/15650487/icanhaz-mustache-loop-iterate-through-elements-js-error. I had the same problem using icanhaz.js/mustache with jquery 1.9.1. After changing to jquery 1.8.3 the problem disappeared. – ducin Mar 27 '13 at 21:39

score 0 · Answer 2 · answered Feb 19 '13 at 09:19

Would you like this?

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.github.com/janl/mustache.js/0.7.2/mustache.js"></script>
</head>
<body>
<div id="template" style="display:none">
  <p>Works but not what I need:</p>
  <p>{{#numbers}} {{.}} {{/numbers}} </p>
  <p>Doesn't work:</p>
  <table>
      <tr>
        {{#numbers}} {{{th}}} {{/numbers}}
      </tr>
  </table>
</div>
<div id="rendered"></div>
<script>
var json = {
  "numbers": [ 1, 2, 3 ],
  "th": function () {
    return "<th>" + this + "</th>"
  }
};
var compiledTemplate = Mustache.to_html($('#template').html(), json);
$('#rendered').html(compiledTemplate);
</script>
</body>
</html>

score 0 · Answer 3 · answered Nov 15 '18 at 22:10

0

I spent a lot of time debugging this.

The problem is $('#template').html(). It returns broken HTML because table markup is malformed (stuff outside <th> is rendered outside the table by browser)

That is why changing to <script> helps

answered Nov 15 '18 at 22:10

Alex from Jitbit

53,710
19
160
149

mustache js - Can't access array value using tables

3 Answers3