Jqueryを使用してJsonデータを表形式で表示します

Question

以下はサービスコールから受け取ったJasonデータです。

"response": { 
     "eventSessions": { 
      "sessions": [ 
       { 
        "startTime": "07:00:00", 
        "sessionId": 21234, 
        "endTime": "08:00:00", 
        "eventId": 1234, 
        "modifiedDate": "2010-12-07", 
        "sessionDate": "2010-12-07", 
        "numberOfAttendees": 3, 
        "sessionName": "SessionName", 

       }, 

       { 
        "startTime": "09:00:00", 
        "sessionId": 21235, 
        "endTime": "10:00:00", 
        "eventId": 1234, 
        "modifiedDate": "2010-12-07", 
        "sessionDate": "2010-12-07", 
        "numberOfAttendees": 3, 
        "sessionName": "SessionName", 

       }, 
       { 
        "startTime": "07:00:00", 
        "sessionId": 21248, 
        "endTime": "08:00:00", 
        "eventId": 1234, 
        "modifiedDate": "2010-12-08", 
        "sessionDate": "2010-12-08", 
        "numberOfAttendees": 3, 
        "sessionName": "SessionName", 

       }, 
      ] } } 

これは単なるデータの一部です。実データには、セッション要素が30個近くあります。 Session Dateに基づいてsessionIDをグループ化し、Jqueryを使用して以下の形式で表示する必要があります。開始時間と終了時間はセッションごとに異なります。 Plsはここで私を助けます。

  <th width="200" scope="col">Fri, Dec 07</th> 
      <th width="200" scope="col">Sat, Dec 08</th> 

        </tr> 
       <tr> 
         <td><span><strong>7:00 AM - 8:00 AM</strong><br> 
       21234</span></a> </td> 
      <td><span><strong>9:00 AM - 10:00 AM</strong><br> 
       21235</span></a> </td> 
      </tr> 
      <tr> <td><span><strong>7:00 AM - 8:00 AM</strong><br> 
       21248</span></a> </td> 
      </tr> 

Answer 1

あなたは既にforループを使用しようとしましたか？あなたが戻ってきたオブジェクトとオブジェクト応答のすべてにはオブジェクトがあるので、evenSessionsはオブジェクトSessionを持ち、オブジェクト/配列を持っているので、配列として渡せます。

同様：

var return_data = response.eventSessions.session; 
var table_body_html = "<table>"; 

for(var i = 0; i < return_data.length; i++) { 
    var data = return_data[i]; 

    table_body_html += "<th><td colspan="2"></td></th>"; 

    data.each(function(key, value) { 

     table_body_html += "<tr><td>"+ key +"</td><td>"+ value +"</td></tr>"; 

    }); 
} 

table_body_html += "</table>"; 

Answer 2

jQueryのテンプレートを見てみましょう： http://api.jquery.com/category/plugins/templates/ https://github.com/jquery/jquery-tmpl

あなたのような何か書くことができます：

<script type="text/html" id="myTmpl"> 
    <tr> 
    <td>${sessionDate}</td> 
    <td>${startTime}</td> 
    </tr> 
</script> 

を

あなたのajaxリクエストコールバック：

$("#myTmpl").tmpl(response.eventSessions.sessions).appendTo("#yourTable");