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いるsubjectsassignments

このように自分のテーブル内のメインテーブル内にネストして表示したい

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

1ページでデータ全体の詳細ビューを取得できるようにします。

これはバグがあるように見えますが、学生データを再設定するより良い方法を見つけることができません

編集

サンプル 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');
});

セクション内に html 文字列連結コードを記述する必要があります$.each。ただし、文字列の連結に問題がある場合は、目的の出力を見せていただければ、それhtmlもお手伝いできます。

于 2013-02-25T05:42:11.383 に答える