javascript

Question

目前我有这段代码。

它从网址
对于第一级，我将标题栏放在左侧，数据放在右侧，如学生信息

对于像student.subjects这样的其他嵌套数据，我使用标题表格键和来自vals的数据制作表格

$.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而不是硬编码，这样如果有数组主题，那么它会在下面添加新的表行。

这段代码看起来很脏，对于那个

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>

有没有更好的方法将jquery json数据放在html表中

2 个答案:

javascript

html