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

本文介绍了使用Jquery以表格格式显示Json数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

下面是从服务呼叫接收到的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模板: api.jquery/category/plugins/templates/ github/jquery/jquery-tmpl

Take a look at jQuery Templates: api.jquery/category/plugins/templates/ github/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");