Obiekt JSON do tabeli Mustache.js Tabela

Question

Próbuję utworzyć tabelę z obiektem JSON przy użyciu pliku Mustache.js. Chciałem, aby wyświetlało się w dwóch wierszach, ale pokazuje tylko drugi wiersz. Podejrzewam, że pierwszy wiersz jest zastępowany drugim, gdy jest ponownie powiązany w pętli.

Jak mam sobie z tym poradzić? Czy istnieje lepsza struktura, którą powinienem podążać?

Javascript:

var text = '[{"Fullname":"John", "WorkEmail":"john@gmail.com"},{"Fullname":"Mary", "WorkEmail":"mary@gmail.com"}]' 
var obj = JSON.parse(text); 

$(document).ready(function() { 
     var template = $('#user-template').html(); 
     for(var i in obj) 
     { 
     var info = Mustache.render(template, obj[i]); 
     $('#ModuleUserTable').html(info); 
     } 
}); 

Szablon:

<script id="user-template" type="text/template"> 
    <td>{{FullName}}</td> 
    <td>{{WorkEmail}}</td> 
</script> 

tabela:

<table border="1"> 
<tr> 
<th>FullName</th> 
<th>WorkEmail</th> 
</tr> 
<tr id = "ModuleUserTable"> 
</tr> 
</table> 

Answer 1

zorientowali się, że zamiast

$('#ModuleUserTable').html(info); 

powinien być:

$('#ModuleUserTable').append(info); 

wzoru powinny być:

<script id="user-template" type="text/template"> 
<tr> 
    <td>{{FullName}}</td> 
    <td>{{WorkEmail}}</td> 
</tr> 
</script> 

i identyfikator nie powinna być na etykiecie wiersza tabeli. Zamiast tego powinno być na stole sama:

<table border="1" id = "ModuleUserTable> 
<tr> 
<th>FullName</th> 
<th>WorkEmail</th> 
</tr> 
</table> 

W chwili, gdy dopisuje, dodaje nowy wiersz do tabeli z danymi JSON.

Answer 2

w additon do własnego rozwiązania, należy rozważyć użycie wąsy powtórzyć wiersz dla Ciebie:

<script id="user-template" type="text/template"> 
{{#people}} 
<tr> 
    <td>{{FullName}}</td> 
    <td>{{WorkEmail}}</td> 
</tr> 
{{/people}} 
</script> 

 

var text = '[{"Fullname":"John", "WorkEmail":"john@gmail.com"},{"Fullname":"Mary", "WorkEmail":"mary@gmail.com"}]' 
var obj = {people: JSON.parse(text)}; 

$(document).ready(function() { 
    var template = $('#user-template').html(); 
    var info = Mustache.render(template, obj); 
    $('#ModuleUserTable').html(info); 
});