2013-02-25 18 views
0

我有這樣的jQuery代碼提取物會從URL中josn並把HTML表格我如何可以提取JSON對象嵌套在jQuery的

$(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[],但我想說明它的子元素,如下面

studnetssemester然後subjects然後assignments

我想顯示他們嵌套在主表裏面像這樣自己的表內

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

這樣我就可以在一個頁面中獲得整個數據的詳細視圖。

這看起來像越野車,但我沒能找到represeting學生數據

編輯

樣本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": [ ] 
         } 
        ] 
+0

你可以發佈你的'json'數據結構的樣本嗎? – 2013-02-25 05:06:37

+0

我已經添加了 – user192082107 2013-02-25 05:11:55

+0

最外層的數據(學生)是數組還是對象?你想顯示多個學生的課程信息還是隻有一個? – 2013-02-25 05:19:27

回答

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輸出,我也可以幫助解決這個問題。

+0

感謝哥們,我很好,我會自己做 – user192082107 2013-02-25 05:59:09