Question

我有这个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": [ ]
                        }
                    ]

Answer 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输出，我也可以提供帮助。

如何在jquery中从json中提取嵌套对象

1 个答案: