¿Cómo agregar opciones al menú desplegable con la plantilla de bigote?

Question

Aquí está mi objeto javascript y quiero agregar opciones al menú desplegable? Quiero que el nombre de la propiedad vaya como valor y el valor de la propiedad vaya como texto en cada opción?

{ "": "", "CSharp40": "C# 4.0", ".NET": ".NET", "JQuery": "JQuery", "Javascript": "Javascript" } 

La salida sería como a continuación

<select id="courses"> 
    <option value=""></option> 
    <option value="CSharp40">C# 4.0</option> 
    <option value=".NET">.NET</option> 
    <option value="JQuery">JQuery</option> 
    <option value="Javascript">Javascript</option> 
</select> 

puede decirme cómo escribir plantilla bigote para esto? Gracias de antemano

Answer 1

Idealmente, su objeto sería una matriz de objetos:

var obj = [{val:"",title:""},{val:"CSharp40",title: "C# 4.0"},{val: ".NET",title: ".NET"},{val: "JQuery",title: "JQuery"},{val: "Javascript",title: "Javascript"}]; 

//open select 
var output = '<select id="courses">'; 
//add each value 
$.each(obj,function(){ 
    output += Mustache.render('<option value="{{val}}">{{title}}</option>', this); 
}); 
//close select 
output += '</select>'; 

//output 
$(function(){ //on document ready 
    $('body').html(output); 
}); 

Answer 2

Acordó que desde sus datos es una lista, debe ser en una matriz. Pero en lugar de iterar manualmente sobre su matriz, le propongo que use esta técnica de bigote. Probado.

var courses = [ 
    {val: "", title:""}, 
    {val: "CSharp40", title: "C# 4.0"}, 
    {val: ".NET", title: ".NET"}, 
    {val: "JQuery", title: "JQuery"}, 
    {val: "Javascript", title: "Javascript"} 
]; 

var template = "<select id='courses'>{{#list}}<option value='{{val}}'>{{title}}</option>{{/list}}</select>"; 

// because Mustache doesn't like anonymous arrays of objects 
var rendered_template = Mustache.to_html(template, {"list":courses}); 

$('#list-container').html(rendered_template);