Tengo una matriz de objetos JSON, y estoy tratando de encontrar la forma de mostrarlos en Mustache.js. La matriz puede ser variable en longitud y contenido.Bigote, iterando sobre objetos JSON

Ejemplo:

[ Object { id="1219", 0="1219", title="Lovely Book ", url= "myurl} , Object { id ="1220" , 0="1220 , title "Lovely Book2" , url="myurl2"}]

He intentado:

 $.getJSON('http://myjsonurl?type=json', function(data) { 
     var template = $('#personTpl').html(); 
     var html = Mustache.to_html(template, data); 
     $('#test').html(html);

y la plantilla:

<script id="personTpl" type="text/template"> 
TITLE: {{#data}} {{title}} IMAGE: {{image}} 
<p>LINK: <a href="{{blogURL}}">{{type}}</a></p> {{/data}} 
</script>

pero que no muestra nada.

He intentado poner el JSON en una matriz, y luego acceder a él directamente utilizando products[1] algo como esto:

$.getJSON("http://myjsonurl?type=json", function(json) 
{ 
    var products = []; 

    $.each(json, function(i, product) 
    {   
      var product = 
      {   
       Title:product.title, 
       Type:product.type, 
       Image:product.image    
      }; 

      products.push(product); 
     ;  
    });  

    var template = "<h1>Title: {{ Title }}</h1> Type: {{ Type }} Image : {{ Image }}"; 


    var html = Mustache.to_html(template, products[1]); 
    $('#json').html(html);      

});

que mostrará una multa récord, pero ¿cómo puedo iterar sobre ellos y mostrar todos ?

Fuente

2012-03-12 BobFlemming

si el conjunto de objetos puede ser variable en el contenido que no suena muy adecuado para una plantilla – maxbeatty

Se necesita un único objeto JSON que se parece a:

var json = { id:"1220" , 0:"1220", title:"Lovely Book2", url:"myurl2" }; 
var template = $('#personTpl').html(); 
var html = Mustache.to_html(template, json); 
$('#test').html(html);

Así que algo como esto debería funcionar:

$.getJSON('http://myjsonurl?type=json', function(data) { 
var template = $('#personTpl').html(); 
$.each(data, function(key,val) { 

     var html = Mustache.to_html(template, val); 
     $('#test').append(html); 
}); 

});

Fuente

2012-03-12 17:59:36 StuR

ah, no se dio cuenta el render del bigote tenía que estar en cada uno. ¡Gracias! – BobFlemming

desgarro Bigote en un bucle así es bastante ineficiente – maxbeatty

Es cierto. Lo anterior responde a la pregunta de OP pero está lejos de ser eficiente. Lo que sería mejor es pasar, p. {array: [{title: 'one'}, {title: 'two'}]}} Luego puede usarlos en la plantilla como: {{#array}}

{{/ array}} – StuR

Para su plantilla para trabajar de la manera que lo tienes, tu JSON necesita mira como este

{ 
    "data": [ 
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"}, 
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"}, 
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"} 
    ] 
}

Fuente

2012-03-12 18:09:10

Esto debería eliminar la necesidad de hacer una declaración cada

var json = { id:"1220", 0:"1220", title:"Lovely Book2", url:"myurl2" }; 
var stuff = {stuff: json}; 
var template = $('#personTpl').html(); 
var html = Mustache.to_html(template, stuff); 
$('#test').html(html);

en su plantilla, hacer esto a través del bucle cosas

<script id="personTpl" type="text/template"> 
{{#stuff}} 
    TITLE: {{title}} IMAGE: {{image}} 
    <p>LINK: <a href="{{blogURL}}">{{type}}</a></p> 
{{/stuff}} 
</script>

Fuente

2012-11-28 09:13:17 mogetutu

Bigote, iterando sobre objetos JSON

Respuesta

{{title}}

Cuestiones relacionadas