Mustache.js: large JSON dictionary & smaller know list of entries to display randomly onfly?

Question

I just started to use mustache.js, I have my json dictionary, my html template, and my mustache.js startup code to inject the whole. My html-mustache template is such:

<script id="tpl" type="text/html">
    <div class="body">
        <p>{{口.zht}}</p>
        <p>{{口.sam.pyn}}</p>
        <p>{{口.sam.fra}}</p>
    </div>
</script>

In my test case with a given existing entry '口', it works (1). But I notice that Mustache seems designed to iterate all the JSON entries. However, I want to work on a small focusList of entries

var focusList = ['們','火山口','火'];

for which I want to pick the corresponding data from my larger (~1000 entries) JSON dictionary.

How can I change or make variable {{#口}} and {{/口}} according to my focusList, so I may print my template with the correct data?

Is there some kinds of variables in the template such:

<script id="tpl" type="text/html">
    <div class="body">
        <p>{{{{entry}}.zht}}</p>
        <p>{{{{entry}}.sam.pyn}}</p>
        <p>{{{{entry}}.sam.fra}}</p>
    </div>
</script>

and in the JS I add:

var entry = focusList[Math.floor(Math.random() * focusList.length)]]

?

Can you slice out the piece you want before Mustache sees anything? The usual approach with Mustache is to do all the data massaging before Mustache sees the data. — mu is too short, Feb 05 '13 at 20:20
I'am a PhD linguist doing a proof of concept in JS/HTML/CSS. I can't process the JSON dictionary with other languages, sadly. Should I create a partial copy of the dictionary using focusList = ['們','火山口','火'], and then ask mustach.js to process this miniDictionary ? JS indications/keywords please. — Hugolpz, Feb 05 '13 at 20:25
Yes, a partial copy of the data would be the usual Mustache way. You could also check a few other template engines (http://garann.github.com/template-chooser/), they all have their pros and cons of course. — mu is too short, Feb 05 '13 at 20:51

score 2 · Accepted Answer · edited May 23 '17 at 12:18

Solution: given a small list of keys, mustache-print relevant entries from larger JSON data:

//1. Suggest a smaller custom list of keys existing in the larger data. 2. Randomize.
var focusList = ['們','火山口','火'];
var randomKey = focusList[Math.floor(Math.random() * focusList.length)];
//3. variable + Template + variable. 4. printing.
var template = ('{{#'+ randomKey +'}}'+ $('#tpl').html() +'{{/'+randomKey+'}}'); // as {{#火}} ... {{/火}}
var output = Mustache.render(template, myBigJSON);
$('#main').append(output)

Alternatively 1: you can also get the whole list of entries using Object.keys (2) to print a random entry from the WHOLE list:

//1. Get and create the list of all keys
var focusList = Object.keys(myBigJSON);

Last, rather than randomize and loop which may repeat some entries, you may shuffle the given list and iterate the shuffled list systematically to print each item systematically.

Mustache.js: large JSON dictionary & smaller know list of entries to display randomly onfly?

1 Answers1