Display Json data in table format using Jquery

Question

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

                },
            ] } }

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>

Guillaume86 · Accepted Answer · 2010-12-29 16:52:24Z

1

Take a look at jQuery Templates: http://api.jquery.com/category/plugins/templates/ https://github.com/jquery/jquery-tmpl

You could write something like:

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

and then in you ajax request callback:

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

edited Dec 29, 2010 at 16:52

answered Dec 29, 2010 at 16:00

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yoram de Langen · Accepted Answer · 2010-12-29 15:23:24Z

You already tried to use a for loop? Because its a object what you get back and everything in object response has a object evenSessions has a object Session and has an object/array so you can us it as an array.

Like:

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

Collectives™ on Stack Overflow

Display Json data in table format using Jquery

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related