0

我有这个 jquery 代码提取从 url 获取 josn 并放入 html 表

$(document).ready(function() {

    $.getJSON('/api/students/2/?format=json', function(data) {
        var items = [];

        $.each(data, function(key, val) {
        items.push('<tr><td>' +key+'</td><td>' + val + '</td></tr>');
        });

        $(items.join('')).appendTo('table');

    });

});

这可以很好地加载第一级对象，但我有许多嵌套级别。我有json里面的所有数据。目前它显示object[]，但我想显示它的子元素，如下所示

像

studnets有semester然后subjects，然后assignments

我想将它们嵌套在自己的表中的主表中，如下所示

<table>
<tr><td>student name  </td></tr>
          <tr><td>semesters  
             <table>
                   <tr><td> subjects 
                                <table><tr><td> Assigments

这样我就可以在一页中获得整个数据的详细视图。

这看起来像越野车，但我无法找到更好的方式来表示学生数据

编辑

示例 json 数据

{
    "id": 2,
    "name": "John",
    "terms": [
        {
            "id": 26,
            "name":"summer"
            "date": "2013-02-18",
            "subjects_set": [
                {
                    "id": 10,
                    "name": "math",
                    "gb_type": [ ],
                    "assignment_set": [
                        {
                            "id": 2,
                            "name": "assignment_level_1",
                            "documents": [ ]
                        }
                    ]
4

1 回答 1

1

由于html您尝试实现的输出/结构有点复杂，我将把 html 字符串附加/连接部分留给您。至于访问json值，请参阅下面的代码：

$.getJSON('/api/students/2/?format=json', function (data) {
    var items = [];    
    //To get student name
    var studentName = data.name;    
    var semester, subject, assignment;
    $.each(data.terms, function () {
        semester = this;
        //to get semester name and date
        var semesterName = semester.name,
            semesterDate = semester.date;
        $.each(semester.subjects_set, function(){
            subject = this;
            //to get subject name
            var subjectName = subject.name;                
            $.each(subject.assignment_set, function(){
                assignment = this;
                //to get assignment name
                var assignmentName = assignment.name;     
            });
        });        
    });
    //$(items.join('')).appendTo('table');
});

您需要在该$.each部分中编写 html 字符串连接代码。但是，如果您在字符串连接方面遇到困难，只需向我显示所需的html输出，我也可以提供帮助。

于 2013-02-25T05:42:11.383 回答