Question

I am using jquery each tag to render json data from the server as a selectbox. For eg:

$('#dogsBox').append(  $.toxmpl("{{each dogs}}<option value='${$value.id}'>${$value.name}</option>{{/each}}",data) 

$('#catsBox').append(  $.tmpl("{{each cats}}<option value='${$value.id}'>${$value.name}</option>{{/each}}",data)

$('wolvesBox').append(  $.tmpl("{{each wolves}}<option value='${$value.id}'>${$value.name}</option>{{/each}}",data)

Assuming dogs, cats and wolves are properties on another object animals, how can I make this generic? What should I substitute for the “?????” in the below script.

animals : [dogs:…, cats:…., wolves:…]

    for(var animalName in animals){
    $("#"+animalName).append(  $.tmpl("{{each ????? }}<option value='${$value.id}'>${$value.name}</option>{{/each}}", animals );

}

Leaving the parameter to each blank and passing animals[animalName]as the data doesn’t work either.

Thanks,
Chris.
P.S: I am using each because it works with objects as well, and not just lists.

Answer 1

for(var animalName in animals){
    $.each(animals[animalName], function(key, val){
            $("#"+animalName ).append(  $.tmpl("<option value='${id}'>${name}</option>", val)  );
        }
    );