2014-07-24 11 views
5

Sto provando a creare una tabella con un oggetto JSON utilizzando Mustache.js. Volevo che mostrasse due righe, tuttavia mostra solo la seconda riga. Sospetto che la prima riga venga sovrascritta dal secondo quando viene rilanciata nel loop.Oggetto JSON nella tabella Moustache.js

Come posso risolvere il problema? O c'è una struttura migliore che dovrei seguire?

Javascript:

var text = '[{"Fullname":"John", "WorkEmail":"[email protected]"},{"Fullname":"Mary", "WorkEmail":"[email protected]"}]' 
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); 
     } 
}); 

Template:

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

tavolo:

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

risposta

5

ho capito che invece di

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

dovrebbe essere:

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

Template dovrebbe essere:

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

e ID non dovrebbe essere sul tag riga della tabella. Invece dovrebbe essere sul tavolo stesso:

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

Il momento in cui si aggiunge, si aggiunge una nuova riga nella tabella con i dati JSON.

6

In additon per la propria soluzione, è consigliabile utilizzare i baffi di ripetere la fila per voi:

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

 

var text = '[{"Fullname":"John", "WorkEmail":"[email protected]"},{"Fullname":"Mary", "WorkEmail":"[email protected]"}]' 
var obj = {people: JSON.parse(text)}; 

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