iterate through JSON array with mustache

I am new to Mustache, please bear with me :)

I have an array in my JSON

"prop":"brands":["nike","adidas","puma"]

if I have the template like this

#prop
 <b>brands</b>
prop

and I want to get something like:

<b>nike</b>
<b>adidas</b>
<b>puma</b>

I understand the elements in the array are not hash key-value pairs, however I am wondering if there is anyway in mustache that I can iterate through the elements.

Thanks!

asked Jun 24 '13 at 19:44

Liang

1171310

add a comment |

I am new to Mustache, please bear with me :)

I have an array in my JSON

"prop":"brands":["nike","adidas","puma"]

if I have the template like this

#prop
 <b>brands</b>
prop

and I want to get something like:

<b>nike</b>
<b>adidas</b>
<b>puma</b>

I understand the elements in the array are not hash key-value pairs, however I am wondering if there is anyway in mustache that I can iterate through the elements.

Thanks!

asked Jun 24 '13 at 19:44

Liang

1171310

add a comment |

I am new to Mustache, please bear with me :)

I have an array in my JSON

"prop":"brands":["nike","adidas","puma"]

if I have the template like this

#prop
 <b>brands</b>
prop

and I want to get something like:

<b>nike</b>
<b>adidas</b>
<b>puma</b>

I understand the elements in the array are not hash key-value pairs, however I am wondering if there is anyway in mustache that I can iterate through the elements.

Thanks!

asked Jun 24 '13 at 19:44

Liang

1171310

I am new to Mustache, please bear with me :)

I have an array in my JSON

"prop":"brands":["nike","adidas","puma"]

if I have the template like this

#prop
 <b>brands</b>
prop

and I want to get something like:

<b>nike</b>
<b>adidas</b>
<b>puma</b>

I understand the elements in the array are not hash key-value pairs, however I am wondering if there is anyway in mustache that I can iterate through the elements.

Thanks!

json mustache

asked Jun 24 '13 at 19:44

Liang

1171310

asked Jun 24 '13 at 19:44

Liang

1171310

asked Jun 24 '13 at 19:44

Liang

1171310

asked Jun 24 '13 at 19:44

Liang

1171310

asked Jun 24 '13 at 19:44

Liang

1171310

add a comment |

3 Answers
3

active

oldest

votes

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '"prop":"brands":["nike","adidas","puma"]';
var obj = JSON.parse(json);
var data = brands: obj.prop['brands'].map(function(x) return name: x; );

Gives you a data variable which will work with the template:

#brands
 <b>name</b>
/brands

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

add a comment |

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array.
Since your array is raw and does not have objects inside you have to reference each string like so:

#props
 <ul>
 #brands
 <li>
 #.
 <b>.</b>
 /.
 </li>
 /brands
 </ul>
/props

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

1

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

1

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

1

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

|
show 1 more comment

This works

#json.props.brands
<h1>.</h1>
/json.props.brands

. When looping over an array of strings, a . can be used to refer to the current item in the list.

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17283776%2fiterate-through-json-array-with-mustache%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '"prop":"brands":["nike","adidas","puma"]';
var obj = JSON.parse(json);
var data = brands: obj.prop['brands'].map(function(x) return name: x; );

Gives you a data variable which will work with the template:

#brands
 <b>name</b>
/brands

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

add a comment |

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '"prop":"brands":["nike","adidas","puma"]';
var obj = JSON.parse(json);
var data = brands: obj.prop['brands'].map(function(x) return name: x; );

Gives you a data variable which will work with the template:

#brands
 <b>name</b>
/brands

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

add a comment |

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '"prop":"brands":["nike","adidas","puma"]';
var obj = JSON.parse(json);
var data = brands: obj.prop['brands'].map(function(x) return name: x; );

Gives you a data variable which will work with the template:

#brands
 <b>name</b>
/brands

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '"prop":"brands":["nike","adidas","puma"]';
var obj = JSON.parse(json);
var data = brands: obj.prop['brands'].map(function(x) return name: x; );

Gives you a data variable which will work with the template:

#brands
 <b>name</b>
/brands

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

answered Jun 24 '13 at 19:52

Paulpro

113k15225230

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

add a comment |

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

Thanks, parsing the JSON before hand seems to be the best solution.

– Liang
Jun 25 '13 at 18:19

add a comment |

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array.
Since your array is raw and does not have objects inside you have to reference each string like so:

#props
 <ul>
 #brands
 <li>
 #.
 <b>.</b>
 /.
 </li>
 /brands
 </ul>
/props

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

1

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

1

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

1

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

|
show 1 more comment

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array.
Since your array is raw and does not have objects inside you have to reference each string like so:

#props
 <ul>
 #brands
 <li>
 #.
 <b>.</b>
 /.
 </li>
 /brands
 </ul>
/props

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

1

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

1

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

1

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

|
show 1 more comment

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array.
Since your array is raw and does not have objects inside you have to reference each string like so:

#props
 <ul>
 #brands
 <li>
 #.
 <b>.</b>
 /.
 </li>
 /brands
 </ul>
/props

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array.
Since your array is raw and does not have objects inside you have to reference each string like so:

#props
 <ul>
 #brands
 <li>
 #.
 <b>.</b>
 /.
 </li>
 /brands
 </ul>
/props

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

edited Jun 27 '13 at 7:38

answered Jun 24 '13 at 20:18

peshkira

4,2462040

answered Jun 24 '13 at 20:18

peshkira

4,2462040

answered Jun 24 '13 at 20:18

peshkira

4,2462040

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

1

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

1

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

1

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

|
show 1 more comment

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

1

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

1

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

1

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

thanks for the answer Paul, I see your point and think it would be a solution, however I can't seem to get the fiddle example to produce html result whenI hit "run", but a very nice solution, thanks!

– Liang
Jun 25 '13 at 18:19

hi. Just out of curiosity: Don't you see the list in the html frame in jsfiddle?

– peshkira
Jun 26 '13 at 6:44

Nope, <div id="testmustache"></div> is all I see, and the "Run" link does nothing to it...

– Liang
Jun 26 '13 at 20:18

I've updated the fiddle. The problem was that mustache was not loaded in Chrome, but worked in Safari. I changed the mustache source and now it should work

– peshkira
Jun 27 '13 at 7:40

Thank you for this and the JS-Fiddle. Is the #. and /. part mandatory/best practice ? I couldn't find documentation on this

– brclz
Feb 18 '17 at 19:09

|
show 1 more comment

This works

#json.props.brands
<h1>.</h1>
/json.props.brands

. When looping over an array of strings, a . can be used to refer to the current item in the list.

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

add a comment |

This works

#json.props.brands
<h1>.</h1>
/json.props.brands

. When looping over an array of strings, a . can be used to refer to the current item in the list.

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

add a comment |

This works

#json.props.brands
<h1>.</h1>
/json.props.brands

. When looping over an array of strings, a . can be used to refer to the current item in the list.

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

This works

#json.props.brands
<h1>.</h1>
/json.props.brands

. When looping over an array of strings, a . can be used to refer to the current item in the list.

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

edited Nov 14 '18 at 19:29

Ondrej Slinták

22.3k1884123

answered Sep 30 '15 at 2:17

Ariel

17115

answered Sep 30 '15 at 2:17

Ariel

17115

answered Sep 30 '15 at 2:17

Ariel

17115

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth