Ad

Printing A Selection Of A JSON Array Data Out To A Page Using JQuery

- 1 answer

Not having much luck with a tricky JSON object and getting it to write certain data into a HTML page. I am attempting to target only particular sets of data in the array - not the whole array. I have got no control over how the JSON object/data is being presented unfortunately.

Here is what I have done:

    <script>
    var response={
  "bookings": {
    "group_id": 12306,
    "name": "Public Meeting Rooms",
    "url": "http:\/\/slqpub.libcal.com\/rooms.php?i=12306",
    "timeslots": [{
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T11:00:00+10:00",
      "booking_end": "2016-01-20T12:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T12:00:00+10:00",
      "booking_end": "2016-01-20T13:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Jo Tindall and Sagarika",
      "booking_start": "2016-01-20T14:00:00+10:00",
      "booking_end": "2016-01-20T15:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Jo Tindall and Sagarika",
      "booking_start": "2016-01-20T15:00:00+10:00",
      "booking_end": "2016-01-20T16:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T16:00:00+10:00",
      "booking_end": "2016-01-20T17:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T17:00:00+10:00",
      "booking_end": "2016-01-20T18:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T18:00:00+10:00",
      "booking_end": "2016-01-20T19:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "recording",
      "booking_start": "2016-01-20T11:00:00+10:00",
      "booking_end": "2016-01-20T12:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "recording",
      "booking_start": "2016-01-20T12:00:00+10:00",
      "booking_end": "2016-01-20T13:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T13:00:00+10:00",
      "booking_end": "2016-01-20T14:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T15:00:00+10:00",
      "booking_end": "2016-01-20T16:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T16:00:00+10:00",
      "booking_end": "2016-01-20T17:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T17:00:00+10:00",
      "booking_end": "2016-01-20T18:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T18:00:00+10:00",
      "booking_end": "2016-01-20T19:00:00+10:00"
    }],
    "last_updated": "2016-01-20T12:40:36+10:00"
  }
}

    </script> 

    <table border="1">
    <tr><th>Room Name</th><th>Booked by</th></tr>
    <tr><td>Meeting Room 2A</td><td><span id="room_bookings2a"></span></td></tr>
    <tr><td>Meeting Room 2B</td><td><span id="room_bookings2b"></span></td></tr>
    <tr><td>Meeting Room 4B</td></tr>
    <tr><td>Meeting Room 4A</td></tr>
    <tr><td>Meeting Room 3E</td></tr>
    <tr><td>Meeting Room 3D</td></tr>
    <tr><td>Meeting Room 3C</td></tr>
    <tr><td>Meeting Room 3B</td></tr>
    <tr><td>Meeting Room 3A</td></tr>
    <tr><td>Meeting Room 2D</td></tr>
    <tr><td>Meeting Room 2C</td></tr>
    <tr><td>Meeting Room 2B</td></tr>
    <tr><td>Meeting Room 4D</td></tr>
    </table>

Right now, it only prints out the last item in the array, not all the data between nodes 0-7.

EDIT: Was not too bright inserting a live API feed from a link so I have cut and paste the JSON data into this question.

Ad

Answer

What you need to do is first iterate the nested JSON and group together the information for each room like this:

// loop over the object and gather all the information for each room type  
var bookingsByRoom = {};
$.each(response.bookings.timeslots, function(i, timeslot) {
  var room = timeslot.room_name;
  if (bookingsByRoom[room]) bookingsByRoom[room].push(timeslot);
  else bookingsByRoom[room] = [timeslot];
});
/*
bookingsByRoom is now an object like:
{
  Meeting Room 2 A: {
    booking_end: "2016-01-20T11:00:00+10:00",
    booking_label: "Mahjong"
    booking_start: "2016-01-20T10:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }, {
    booking_end: "2016-01-20T12:00:00+10:00"
    booking_label: "Mahjong"
    booking_start: "2016-01-20T11:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }
}, 
{
  Meeting Room 2 B: ....
}

*/

Then you can loop over the newly created array and display whatever data you need.

Here is a jsFiddle showing how you might further this to actually display your data.

Ad
source: stackoverflow.com
Ad