jQuery template, create 2 combo from nested JSON

Question

so this is my case.. i want to create 2 combo's which the second one is dependent on the value of the first. i want them to be built from a nested json object

my json object looks like this:

var API = 
{
methods:
{
    login:
    {
            checkin:{},
            logout:{}
    },
    register:
    {
            register:{},
            getinfo:{}
    }
}
} 

i want to create the first combo from each object under methods (there is a lot more then the 2 i listed here)

so i want to get: login and register as tags inside a and then i want to create a second combo filled with the objects under the method choosen in the first combo.

how can i do that? what will be the values in my template? i mean the values in the ${} signs

thanks!

Answer 1

ok so i got it...

the way i did it is like this:

aspx page:

<select id="drpNameSpace"></select>
<select id="drpMethod"></select>

<script id="nameSpaceComboTmpl" type="text/x-jquery-tmpl"> 
    {{each methods}} <option value='${$index}'>${$index}</option>{{/each}}
</script>
<script id="methodComboTmpl" type="text/x-jquery-tmpl"> 
   {{each $data}} <option value='${$index}'>${$index}</option>{{/each}}
</script>

my js:

$(function () {
$("#drpNameSpace").change(nameSpaceChanged);
$("#drpMethod").change(methodChanged);
fillNameSpaceCombo(); }); 


function fillNameSpaceCombo () {
        $("#nameSpaceComboTmpl").tmpl(API).appendTo("#drpNameSpace");
        fillMethodCombo($("#drpNameSpace").val());
}


function nameSpaceChanged () {
    $("#drpMethod").html("");
    var value = $("#drpNameSpace").val();
    fillMethodCombo(value);
    methodChanged();
}

function fillMethodCombo (value) {
    $("#methodComboTmpl").tmpl(API.methods[value]).appendTo("#drpMethod");
}

works great for me..

the tricky part which i didnt know was: {{each $data}} ${$index}{{/each}}

hope this will help someone...

the end;