使用Jquery以表格格式显示Json数据 [英] Display Json data in table format using Jquery

问题描述

下面是从服务呼叫接收到的Jason数据.

Below is the Jason data received from service call.

"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以如下所示的格式显示.请注意，每个会话的开始时间和结束时间不同.请在这里帮助我.

This is just a part of data. Real data has close to 30 session elements. Need to group sessionID based on Session Date and display as show below format using Jquery. Please note Start time and End time are different for each session. Pls help me out here.

            <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>

推荐答案

看看jQuery模板: http://api.jquery.com/category/plugins/templates/ https://github.com/jquery/jquery-tmpl

Take a look at jQuery Templates: 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请求中回调:

and then in you ajax request callback:

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

这篇关于使用Jquery以表格格式显示Json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！