有沒有更好的方法把jQuery json數據放在html表中

Question

目前我有這個代碼。

1. 它得到的JSON從URL
2. 對於第一個層面，我把標題列在左，右像學生信息

3. 對於像student.subjects其他嵌套數據我使數據表與丘壑

   $.getJSON('api/data.json', function(data) { 
       var student = []; 
       $.each(data, function(key, val) { 
       student.push('<tr><td>' +key+'</td><td>' + val + '</td></tr>'); 
       }); 
   
   
   
       var subjects = []; 
       subject.push('<table><tr>'); 
   
       $.each(data.subject[0], function (key, val) { 
        decision.push('<th>' +key+'</th>'); 
       }); 
   
       subject.push('</tr><tr>'); 
   
       $.each(data.subject, function() { 
        mydata = this 
        $.each(mydata, function (key, val) { 
          subject.push('<td>'+val+'</td>'); 
         }); 
   
         subject.push('</tr><tr>'); 
       }); 
   
       subject.push('</tr></table>'); 
   
   
       $(student.join('')).appendTo('table#student_table'); 
       $(subject.join('')).appendTo('table#subject_table'); 
   
   }); 
   

頁眉格式的密鑰和數據有沒有通用的方法，它會自動檢測像data.subjects而不是哈日d編碼，這樣如果存在數組fo，那麼它將在下面添加新的表格行。

這個代碼看起來髒髒的，對於

Answer 1

我不喜歡混合標記和代碼的任何更好的方法。我建議使用模板引擎來渲染數據。其他許多可用的，但一個共同的模板引擎是jQuery template。

將它應用到你的問題，你會做這樣的事情：

var studentRow = "<tr><td>${key}</td><td>${val}</td></tr>"; 

// Compile the markup as a named template 
$.template("studentTable", studentRow); 

$.getJSON('api/data.json', function(data) { 
    $.tmpl("studentTable", data).appendTo("table#student_table"); 
} 

但是你需要改變的標記在#student_table包括表的開始和結束。

Answer 2

如果您發現自己在JavaScript中混合了過多的HTML標記，則可能需要使用模板解決方案。 underscore.js具有_.template()功能，將解決這個問題爲您：

的JavaScript

$.getJSON('api/data.json', function(data) { 
    var compiled_student = _.template($("template-student-row".html(), {data:data})); 
    $("#student_table").append(compiled_student); 

    var compiled_subject = _.template($("template-subject-row".html(), {keys: Object.keys(data.subject[0]), subjects: data.subject)})); 
    $("#subject_table").append(compiled_subject); 

}); 

的HTML

<script id='template-student-row' type='text/template'> 
<% _.each(data, function(k,v){ %> 
    <tr> 
     <td><%= k %></td> 
     <td><%= v %></td> 
    </tr> 
<% }); %> 
</script> 

<script id='template-subject-row' type='text/template'> 
    <tr> 
     <% _.each(keys, function(k){ %> <th><%= k %></th> <% }); %> 
    </tr> 
    <tr> 
     <% _.each(subjects, function(s){ %> <td><%= s %></td> <% }); %> 
    </tr> 
</script> 

<table id='student_table'></table> 
<table id='subject_table'></table>