Mustache.js: Iterate over object key/value pairs?

[chlab]

Is it possible to iterate over the key/value pairs of an object?

Consider this example:

var values = {
  'single': 'Single bed',
  'double': 'Double bed',
  'twin': 'Twin beds'
};

Equivalent handlebar.js code:

<select name="bed_type">
{{#values}}
  <option value="{{@key}}">{{this}}</option>
{{/values}}
</select>

I did not find a way to do it with mustache.js

Thanks.

[dasilvacontin]

Hi @chlab!

Instead of passing your data directly to the renderer, you should format it into a view object. Or use a custom helper. There are some ideas on these stackoverflow threads:

http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of
http://stackoverflow.com/questions/9981907/how-to-iterate-over-a-hash-in-mustache-js

Let us know if it's still not clear. Cheers!

[chlab]

Thanks @dasilvacontin.
That seems like a pretty awkward way to do that, no? What's the reasoning behind this? Would it not be much simpler the handlebar way?
Cheers

[bobthecow]

@chlab This is a fundamental principle of Mustache. All logic should be extracted into a view, which is not the same as a template. In this case, it seems more awkward because it's just a little bit of logic, but that's a slippery slope that Mustache doesn't even let you go down :)

[chlab]

Fair enough. Thanks for the explanation!

[lu4]

The fundamental principle that was originally referred to, makes Mustache too opinionated, I do not always want to arrange a separate conversion phase to make Mustache happy...

[baseten]

Is allowing iteration over a simple object really introducing logic into a mustache view? My argument would be no. I am a fan of the logic-less principle, but we can already iterate arrays, I agree with the OP that this is unnecessarily awkward. Consider the following example:

I'd like my data to be:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

But it has to be:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

To render:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

[cmardonespino]

Hi guys,

How can I iterate an anonymous list? I tried using {{#.}} and {{/.}} but thats not working.

Thanks

[prashantcs8]

To iterate an anonymous list

let facts = doc.data(); res.render('index', {facts});

<ul> {{#each facts}} <li>Key: {{@key}} Value = {{this}}</li> {{/each}} </ul>

[ppKrauss]

There are something in this issue that is official?

How to do real use of anonymous list of objects with key-value pairs?

Please show a real example using the suggested object, var values = { 'single': 'Single bed', ...} and the suggested output of the question.

PS: @prashantcs8 your example is real? not working.

[ppKrauss]

@chlab we are in 2018... There are no option in Mustache to use anonymous references?

[ppKrauss]

@baseten , about yor "But it has to be" above, that is the problem, is ugly to enforce data-structure convertions...

It is not an elegant solution, but I am using res.render('index', objs2list(obj)) where perhaps exists a Mustache helper method to do the convertion,

function objs2list(p) {
  r = [];
  for (var key in p) if (p.hasOwnProperty(key)) {
    r.push({"@key":key,"@val":p[key]});
  }
  return r;
}

exist?