arrays - multidimensional - array_search

¿Cómo iterar sobre la matriz de objetos en el manillar?

Question

Esto puede parecer una pregunta tonta, pero parece que no puedo encontrar la respuesta en ningún lado.

Estoy accediendo a esta API web que devuelve una matriz de objetos en formato JSON:

Handlebars docs muestra el siguiente ejemplo:

<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>

en el contexto de:

{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}

En mi caso, no tengo un nombre para la matriz, es solo el objeto raíz de la respuesta. Intenté usar {{#each}} sin suerte.

La primera vez que usé manubrios ... ¿qué me estoy perdiendo?

ACTUALIZAR

Aquí hay un violín simplificado para mostrar lo que estoy pidiendo: http://jsfiddle.net/KPCh4/2/

¿El manillar requiere que la variable de contexto sea un objeto y no una matriz?

Answer 1

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

A continuación se muestran las dos formas de iterar sobre el conjunto. Una es con aprobación json directa y otra es nombrar la matriz json mientras pasa al titular del contenido.

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

En html usa el siguiente código:

<div id="small-content-placeholder"></div>

El siguiente puede ser colocado en el encabezado o cuerpo de html:

<script id="small-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>email</th>
</thead>
<tbody>
{{#data}}
<tr>
<td>{{username}}
</td>
<td>{{email}}</td>
</tr>
{{/data}}
</tbody>
</table>
</script>

El siguiente está en documento listo:

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 titular del contenido:

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

Eg2: iteración usando cada uno.

Considera 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]" }
]
}
];

Mientras pasa el json al titular del contenido, asígnele un nombre de esta manera:

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

Y la plantilla se ve así:

<script id="big-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>email</th>
</thead>
<tbody>
{{#each big_data}}
<tr>
<td>{{name}}
<ul>
{{#details}}
<li>{{username}}</li>
<li>{{email}}</li>
{{/details}}
</ul>
</td>
<td>{{email}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>

Answer 2

Los manubrios pueden usar una matriz como contexto. Puedes usar como la raíz de los datos. Entonces puede recorrer los datos de su matriz con {{#each .}} .

var data = [
{
Category: "General",
DocumentList: [
{
DocumentName: "Document Name 1 - General",
DocumentLocation: "Document Location 1 - General"
},
{
DocumentName: "Document Name 2 - General",
DocumentLocation: "Document Location 2 - General"
}
]
},
{
Category: "Unit Documents",
DocumentList: [
{
DocumentName: "Document Name 1 - Unit Documents",
DocumentList: "Document Location 1 - Unit Documents"
}
]
},
{
Category: "Minutes"
}
];
$(function() {
var source = $("#document-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$(''#DocumentResults'').html(html);
});

.row {
border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
<div>
{{#each .}}
<div class="row">
<div class="col-md-12">
<h2>{{Category}}</h2>
{{#DocumentList}}
<p>{{DocumentName}} at {{DocumentLocation}}</p>
{{/DocumentList}}
</div>
</div>
{{/each}}
</div>
</script>

Answer 3

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

{{#each this}}
<div class="row"></div>
{{/each}}

Answer 4

Quise decir en la llamada template() ..

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

var html = template(data);

hacer

var html = template({apidata: data});

y usa {{#each apidata}} en tu código de plantilla

demo en http://jsfiddle.net/KPCh4/4/
( eliminado algunos restos if código se estrelló )

Answer 5

Usando this y {{this}} . Ver el código a continuación en node.js:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

Salida de registro de consola:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>