Iterating over Roots in ICanHaz.js / Mustache

Question

I'm running into an issue with iteration using ICanHaz.js / Mustache. I want to loop over the roots of a JSON structure and pull out a specific parameter. Here is my JSON:

{
"1": {
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
},
"2": {
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
},
"3": {
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
}
}

Here is my ICanHaz Template:

<script id="groupselect_template" type="text/html">
     {{ /. }}
        <option value="{{name}}">{{name}}</option>
     {{ /. }}
</script>

And here is my JS:

var iterationFunc = function(data) {
var temp = ich.groupselect_template(data);
$('#selectdiv').append(temp);

}

I based this structure off of these past answers (here, here and here), but I can't seem to get it to work. Can anyone help? Since ICH has mustache inside of it, I know a broader mustache-based solution can work.

marbor3 marbor3 · Accepted Answer · 2013-02-13T15:25:15

I think you can't loop through object properties easily in moustache. But you can do it through array, so if you can, change your JSON to something like

[{
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
},{
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
},{
    "param1": "true",
    "param2": "false",
    "param3": "false",
    "targetMe": "ADMINUSERS"
}]

or before applying data to template, iterate through it and change it to array, for example using jQuery

var dataArray = [];
$.each(data, function(key, item){
    dataArray.push(item);
});

Here's a working Fiddle

Iterating over Roots in ICanHaz.js / Mustache

1 Answers