Отображение данных Json в табличном формате с использованием Jquery - PullRequest
Новая
       3

Отображение данных Json в табличном формате с использованием Jquery

1 голос
/ 29 декабря 2010

Ниже приведены данные о Джейсоне, полученные от сервисного вызова. 

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

Ответы [ 2 ]

1 голос
/ 29 декабря 2010

Взгляните на шаблоны 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");
0 голосов
/ 29 декабря 2010

Вы уже пытались использовать цикл for?Потому что это объект, который вы получаете, и все в ответе объекта имеет объект. Даже у сеанса есть объект Session и объект / массив, поэтому вы можете использовать его как массив.

...