Rose tinted json

Lately, we have been looking at providing a little automation to parts of the site which are less dynamic, by using some of the data serialisations that we create, with a sprinkling of javaScript magic.  Specifically we’ve looked at pulling Edge Hill event data, tagged with “rose theatre” into the Rose Theatre site.

This week I will be mostly using jsonCurrently events are added to the events Edge Hill events data, which can be duplicated. Our data serialisations come in four flavours, XML, JSON, PHP and YAML.

This week I have been mostly using JSON.

JSON is javaScript, and doesn’t need a server.  It runs on the site visitor’s browser (if enabled) and provides a way for us to access dynamic data and publish it on static web pages.

The first stage was to create the JSON feed.  Since Edge Hill already has data serialisations for Events and News, all I needed to do was to tweak it a bit and add a new function to the database to return events tagged with “rose theatre” and add a new URL to access the results which look something like this:

[{
	"title":"Alternative Stand Up",
	"slug":"alternative-stand-up",
	"summary":"Comedy at the Rose Theatre.",
	"content":"<p>Tickets \u00a35.50 \/ \u00a33.50 concessions<p><strong>Jamie Sutherland<p>One of the freshest and most natural talents to emerge in the last few years, Jamie has truly established himself on the comedy circuit, and is now very much in demand all over the UK.\u00a0 Liverpool born Jamie will keep you amused with gags, tall tales, and true stories garnered from everyday observational topics.<p><strong>Danny McLoughlin<p>Danny is a complete natural and destined for the top.\u00a0 Think Peter Kay for the confidence factor.<p><strong>Rosie Wilby<p>Rosie Wilby has been performing as a singer songwriter for many years and turned to comedy in 2004, storming through to the semi finals of So You Think You're Funny, on only her second ever stand up gig.\u00a0 In August 2006, Rosie unveiled her debut full length show \u2018Olympic Swingball Champion 2012' at Edinburgh Fringe.<p>Compere.....<p><strong>Ste Porter<p>A top class act who will be a regular comedy circuit favourite before long.\u00a0 See him in Ormskirk first!<p>For further information or to book, call 01695 584480 or email <a>rose@edgehill.ac.uk.",
	"start_date":"2008-10-07",
	"start_time":"20:00:00",
	"end_date":"2008-10-07",
	"end_time":"22:00:00",
	"location":7,
	"created_at":"2008-08-13 14:04:28",
	"updated_at":"2008-08-14 13:46:40",
	"building":"",
	"url":"http:\/\/www.edgehill.ac.uk\/events\/2008\/10\/07\/alternative-stand-up\/json",
	"tags":{
		"Stand Up":"Stand Up",
		"comedy":"comedy",
		"rose theatre":"rose theatre"
	}
}]

Next, add the following code to the html document into which you want to add the data feed:

<div id="rtevents">
  <h3>Next up</h3>
  <p>
    The Rose Theatre's <a href="/events/tag/rose theatre" title="List of events for the rose Theate">upcoming events</a>
  </p>
</div>

The div with the id of “rtevents” acts as a placeholder for the code which will be inserted. At this point, a level 3 heading has been applied with a link to the events page. This gives visitors without javascript capabilities a way of viewing the events (in this case a link to events for the rose theatre page).

In addition to the tags, the jQuery library was added. jQuery has a ready-made method for “getting” a JSON feed and the documentation is detailed, yet simple enough to get you started with a working example.  Using that example, I wrote:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  $(document).ready(function(){
    $.getJSON(/events/tag/rose+theatre/json”, function(data){
      $(‘#rtevents’).html(<h3>Next up</h3>);
      $(‘#rtevents’).append(<table id="”eventrow”"></table>);
      $(‘#eventrow’).append(<tr><th>Date</th><th>Event</th><th>Time</th></tr>)
      $.each(data, function(i,data){
        urldate = data.start_date.substr(0, 4)+/+data.start_date.substr(5, 2)+/+data.start_date.substr(8, 2);
        date =<td>+data.start_date.substr(8, 2)+/+data.start_date.substr(5, 2)+</td>;
        time =<td>+data.start_time.substr(0, 5)+</td>;
        time = time ==<td>00:00</td>?<td>TBA</td>: time;
        oddeven = i % 2 == 0 ? ‘even’ : ‘odd’;
        $(“#eventrow”).append(<tr class="”‘+oddeven+‘”">+date+<td><a href="”/events/’+urldate+‘/’+data.slug+‘”">+data.title+</a></td>+time+</tr>);
        if (i == 5) {// sets the maximum number of records returned
          return false;
        }
      });
    });
  });

Let’s try to explain what’s going on here (row by row). The whole thing won’t work unless javascript is enabled in your browser.

  1. Line 1: A jQuery function which runs the javascript that follows it after the html page has loaded.
  2. Line 2: A jQuery call to the JSON feed and a function call to to tell the browser what to do with the data.
  3. Line 3: Find the element with the id “rtevents” and replace it’s contents with our <h3> element.
  4. Line 4-5: Append the table (named; “eventrow”) and table headers to the “rtevents” element (following the h3).
  5. Line 6: For each event returned in the JSON feed, do the following:
  6. Line 7-11: Format JSON data for output.
  7. Line 12: Append the table row to the table (named “eventrow”) with all the formatted data.
  8. Line 13-15: restrict the number of table rows returned if necessary.

Knowing this, you can parse any JSON feeds using jQuery, and there are plenty to choose from these days. A few examples:

Fancy yourself as a javaScript developer? Then add JSON to your bow strings.

7 replies on “Rose tinted json”

  1. question
    does json read an xml file generated as an rss feed from the db
    seems very clever
    specially as you cant see where the actual data pull is
    🙂

  2. Hi Steve O!

    A database call returns an array of PHP objects which is then translated into either an Atom feed or JSON. The JSON feed isn’t a “standard” – it’s more a raw dump of data but it’s more easily consumed by JavaScript on the client than Atom/RSS feeds which would need to go through some server-side conversion.

  3. Nice, it would be great to get more content delivered like this. I’m in the process of writing a bot for an IRC channel I’m hoping to get going for my course, and it’s hard to find some decent content for it to deliver without having to scrape the content of course pages etc.

    There was talk about some API’s being set up to better deliver information to students (I’d give anything to avoid using Blackboard for my course and just write my own UWA widget, or whatever)

    Nice to see some progress.

  4. Gary – we’re constantly looking at new ways to expose our data in as many ways as possible. News and Events are the areas I’ve been involved with, but Mike Nolan has also been working on the XCRI project: to share information about courses between UK education institutions and aggregators such as UCAS and other sites that advertise courses.

    Patrick – Why not indeed. This post highlights an immediate need and quick fix to reduce duplication of effort. Work on the Rose Theatre site is just one area under re-development which will pull and push data and will probably take advantage of server-side scripts for our own and maybe even third party data.

  5. Gary,
    I work mainly on the GO portal and we are moving towards pulling certain feeds from Blackboard into it. It’ll easily flag up recently changed content and added information to you the moment you log into the GO portal. I’ll most likely also be allowing this information to be accessed as RSS external of GO (with some sort of authentication or token scheme in place). The potential to get all your latest relevant info from the Uni via a simple RSS feed is there.

Comments are closed.