Bir json nesnesi dizisi içinden döngü yapmak

Question

Bu nedenle, hb'yi şablonlama motoru olarak kullandığım bu web uygulamasına sahibim. Bir değişken

[{";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}] 

var: Şimdi benim dinlenme API JSON nesneleri dizisini üzerine gönderiyorum disklist, bu verinin olduğunu.

Gidonları kullanmak, şu ana kadar denediğim şeydi, ancak çalışmadığı görülüyor. html olarak

console.log(disklist[0].name); // LOGS THE NAME PROPERLY 

    var source = $("#dlist").html(); 
    var template = Handlebars.compile(source); 
    var wrapper = {objects: disklist}; 

:

<script type='text/template' id='dlist'> 
    <li> 
    {{#each objects}} 
     <h1>{{name}}</h1> 
    {{/each}} 
    </li> 
</script> 

Ama hiçbir şey baskılar!

Bunu nasıl düzeltirim?

Ayrıca, sadece çıplak kemikleri JavaScript ile bunu yapmanın bir yolu varsa, lütfen paylaşın!

Answer 1

Düz js:

var disklist = [ 
 
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}, 
 
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate2","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}, 
 
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate3","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]} 
 
]; 
 

 

 
document.getElementById('container').innerHTML = disklist.map(function(disk) { 
 
    return '<li><h1>' + disk.name + '</h1></li>'; 
 
}).join('');

<ul id="container"> 
 
</ul>

bu istediğini olup olmadığından emin değil misiniz?

WALKTHROUGH: Bir eleman yaratırız ve içine ne iş yapacağımızın konteynerini yaparız. Daha sonra, oluşturacağımız şey olan bir dizgeye innerHTML'u ayarladık. disklist.map, disklist dizisinden geçer ve her bir öğeyi bu durumda <li><h1>{{disk.name}}</h1></li> olan bir dizeyle uygular. İçeriği istediğiniz gibi değiştirebilirsiniz, sadece HTML. Ardından, .join('')'u kullanarak dizgiler dizisine tek bir büyük dizeye katılırız. Son olarak, yeni oluşturduğumuz dizeye innerHTML'u ayarladık, dala.

Answer 2

Şablon için yanlış türde kullanıyorsunuz. text/x-handlebars-template olmalıdır. Bunun önemli olduğuna emin değilim, ama Handlebars' own documentation ile tutarlı olmalısınız.

Ayrıca, aslında HTML oluşturan bir satır göremiyorum. Gidonları kullanmak için iki şeye ihtiyacınız vardır: derlenmiş bir şablon ve bir "içerik".

var renderedHTML = template(wrapper); // pass your compiled template the context 
document.getElementById("container").appendChild(renderedHTML); 
// you might have to use innerHTML = renderedHTML instead 
// I forget if renderedHTML will be a string or DOM node 
// For jQuery just use $("#container").append(renderedHTML); 

Sizin derlenmiş şablon verin bağlamı alır: Eğer bağlamını tanımlamak sonra şöyle şablonu yürütmek için ihtiyaç (burada muhtemelen "bağlam" gibi bir ad olmalıdır wrapper değişken, var varsayıyorum) ve onu kendisine takmak için veri olarak kullanır ve sonucu sayfanıza ekleyebilmeniz için döndürür.