Cómo iterar array de objetos en manillares?

Te sugerimos que pruebes esta solución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

Puedes pasar this a cada bloque. Vea aquí: http://jsfiddle.net/yR7TZ/1/

#each this
    

/each

Este violín tiene ambos each y json directo. http://jsfiddle.net/streethawk707/a9ssja22/.

A continuación se muestran las dos formas de iterar array. Uno es con el paso directo de json y otro está nombrando el json array mientras pasa al titular del contenido.

Eg1: el siguiente ejemplo está llamando directamente a json key (datos) dentro de la variable small_data.

En html use el siguiente código:

Lo siguiente se puede colocar en el encabezado o cuerpo de html:

El siguiente está listo para el documento:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

El siguiente es el json:

var small_data = 
            data: [
                username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" ,
                username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" 
            ]
        ;

Finalmente adjunte el json al soporte de contenido:

$("#small-content-placeholder").html(small_template(small_data));

Eg2: Iteración usando cada uno.

Considere el siguiente json.

var big_data = [
            
                name: "users1",
                details: [
                    username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" ,
                    username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" ,
                    username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" 
                  ]
            ,
            
                name: "users2",
                details: [
                    username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" ,
                    username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" ,
                    username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" 
                  ]
            
      ];

Al pasar el json al titular del contenido, simplemente nómbrelo de esta manera:

$("#big-content-placeholder").html(big_template(big_data:big_data));

Y la plantilla se ve así:

Quise decir en el template() llamar..

Solo necesita pasar los resultados como un objeto. Entonces en lugar de llamar

var html = template(data);

hacer

var html = template(apidata: data);

y use #each apidata en su código de plantilla

demostración en http://jsfiddle.net/KPCh4/4/
(quitó algunas sobras if código que se estrelló)

Reseñas y calificaciones del post

Al final de todo puedes encontrar las críticas de otros programadores, tú también puedes insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador