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

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

jquery user-interface

使用Jquery以表格格式显示Json数据,jquery,user-interface,selector,Jquery,User Interface,Selector,下面是从服务呼叫接收到的Jason数据 "response": { "eventSessions": { "sessions": [ { "startTime": "07:00:00", "sessionId": 21234, "endTime": "08:00:00",

下面是从服务呼叫接收到的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",

                },
            ] } }

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

这只是数据的一部分。真实数据有近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>

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

2007年12月7日，星期五 12月8日，星期六 上午7:00-上午8:00
21234 上午9:00-上午10:00
21235 上午7:00-上午8:00
21248

您已经尝试使用for循环了吗？因为你得到的是一个对象，对象响应中的所有东西都有一个对象，会话有一个对象会话，还有一个对象/数组，所以你可以把它当作数组

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

比如：

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

var return\u data=response.eventSessions.session；
var表_body_html=“”；
对于（var i=0；i

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

比如：

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

var return\u data=response.eventSessions.session；
var表_body_html=“”；
对于（var i=0；i

看看jQuery模板： https://github.com/jquery/jquery-tmpl

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

你可以这样写：

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

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

看看jQuery模板： https://github.com/jquery/jquery-tmpl

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

你可以这样写：

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

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