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个会话元素。需要基于会话日期对sessionID进行分组，并使用Jquery以下面的格式显示。请注意每个会话的开始时间和结束时间不同。请帮帮我。

            <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

看看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");

Answer 2

您是否已尝试使用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>";

使用Jquery以表格格式显示Json数据

2 个答案: