JSON-Objekt in Moustache.js Tabelle

Question

Ich versuche, eine Tabelle mit einem JSON-Objekt mit Mustache.js zu erstellen. Ich wollte, dass es zwei Zeilen zeigt, aber es zeigt nur die zweite Zeile. Ich vermute, dass die erste Zeile von der Sekunde überschrieben wird, wenn sie erneut in der Schleife gebunden wird.

Wie arbeite ich mich damit aus? Oder gibt es eine bessere Struktur, der ich folgen sollte?

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

Vorlage:

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

Tabelle:

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

Answer 1

ich herausgefunden, dass anstelle von

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

es sein sollte:

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

und ID sollte nicht auf die Tabellenzeile tag:

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

Vorlage sein sollte. Stattdessen sollte es auf dem Tisch selbst:

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

In dem Moment, wenn es anhängt, fügt es eine neue Zeile in die Tabelle mit den JSON-Daten.

Answer 2

In additon zu Ihrer eigenen Lösung, sollten Sie mit Schnurrbart betrachten Sie die Zeile für Sie zu wiederholen:

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