1

目前我有这个代码。

  1. 它从 url 获取 json
  2. 对于第一级，我将标题列放在左侧，将数据放在右侧，例如学生信息

  3. 对于其他嵌套数据，例如 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而不是硬编码，以便如果有主题数组，那么它会在其下方添加新的表格行。

这段代码看起来很脏，任何更好的方法

4

2 回答 2

0

如果您发现自己在 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>
于 2013-02-25T08:56:04.663 回答
0

我不喜欢混合标记和代码。我建议使用模板引擎来呈现数据。还有许多其他可用的，但一种常见的模板引擎是jQuery 模板。

要将其应用于您的问题，您可以执行以下操作：

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以包含表格的开头和结尾。

于 2013-02-25T08:20:12.910 回答