Mustache, lặp qua các đối tượng JSON

Question

Tôi có một mảng JSON đối tượng và đang cố gắng tìm cách hiển thị chúng trong Mustache.js. Mảng có thể thay đổi về chiều dài và nội dung.

Ví dụ:

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

Ive đã cố gắng:

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

và mẫu:

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

nhưng điều đó không hiển thị bất cứ điều gì.

Tôi đã thử đặt JSON thành một mảng, và sau đó truy cập vào nó trực tiếp sử dụng products[1] một cái gì đó như thế này:

$.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);      

}); 

mà sẽ hiển thị một tốt hồ sơ, nhưng làm thế nào tôi có thể lặp qua chúng và hiển thị tất cả ?

Answer 1

Bạn cần một đối tượng JSON đơn trông giống như:

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); 

Vì vậy, một cái gì đó như thế này nên làm việc:

$.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); 
}); 

}); 

Answer 2

Đối với mẫu của bạn để làm việc theo cách bạn có nó, json của bạn cần phải trông giống như thế này

{ 
    "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"} 
    ] 
} 

Answer 3

Điều này sẽ giúp loại bỏ sự cần thiết phải thực hiện từng tuyên bố

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); 

Trong Mẫu, làm điều này để lặp qua thứ

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