Consuming LOGD data using jQuery

Level:

LOGD Data Mashups and Consumption

Contributor:

Alvaro Graves

Description:

Brief introduction to jQuery and how to use it with LOGD

[toc list: ul; ]

What is jQuery?

jQuery is a javascript library aimed to make things easy when it comes to write javascript.

How to use jQuery?

First, it is necessary to load the library as a regular javascript file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

Then, we can add the following code

<script type="text/javascript">
$(document).ready(function() {
  YOUR CODE GOES HERE
});
</script>

The use of $(document).read() guarantees that your code will be executed after all the proper files has been loaded.

Managing DOM objects

In order to access a DOM element, we can call them by id, class, or any other attribute. For example, to show the content of an element which id is "results" we can do

<script type="text/javascript">
$(document).ready(function() {
  alert($("#results").html());
});
</script>

As we can see $("#results") refers to the DOM element, while the function .html() returns what inside. (You can refer to all elements of a specific class or other attributes. For more details on selectors you can go to jQuery's official documentation).

AJAX with jQuery

One of the nice things of jQuery is the ease for creating AJAX calls. We need to create an ajax call which will receive a JSONP object (a JSONP is a JSON object with a function name wrapping it. This is done to being able to use a JSON object called from a different server than the one where the script is running). In the url parameter we define the URL agains we are going to to our call. The parameter data will include all the parameters we want to pass (in this case parameter named "title" which value is "Linking Open Government Data"). If the ajax operation is successful, there will be a call to the function defined on the success parameter.

<script type="text/javascript">
$(document).ready(function() {
$.ajax({
     dataType: 'jsonp',
     jsonp: 'callback',
     url: 'http://example.org/getfile',
     data: {
         title: "Linking Open Government Data",
     },
     success: function(data){
       alert(data);
    }
});
});
</script>

Now, if we want to query, say, how many times the version "1st anniversary" of dataset 1033 has been modified. we can query

prefix dcterms: <http://purl.org/dc/terms/>
                   select distinct ?date where {
                       graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {
                           <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .
                       }
                  }

For that, we should expect to obtain something like we expect to receive a JSON object from the SPARQL endpoint that looks like

 
{ "head": { "link": [], "vars": ["date"] },
  "results": { "distinct": false, "ordered": true, "bindings": [
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:04.964+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:05.789+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:06.866+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:08.290+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:09.194+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:09.931+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:11.043+00:05" }},
    { "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:11.809+00:05" }} ] } }

As you can see the real values are available at JSON Object -> results ->binding [ date ->value ]. Thus, the code to query and use the data should look something like this:

<script type="text/javascript">
$(document).ready(function() {
var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
                   select distinct ?date where {\
                       graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {\
                           <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .\
                       }\
                  }';
$.ajax({
     dataType: 'jsonp',
     jsonp: 'callback',
     url: 'http://logd.tw.rpi.edu/sparql',
     data: {
         query: datesQuery,
         output: 'sparql',
     },
     success: function(data){
        var aux = data.results.bindings;
        for(var i=0; i<aux.length; i++){
         $("#results").append(aux[i].date.value);
        }
    }
});
});
</script>

In the previous piece of code we can see that first we create a SPARQL query and we assigned it to datesQuery (the backslashes are the way javascript allow mutiline strings). Inside the $.ajax command we define that the data we are going to send is a query(datesQuery) and the output format so we tell the SPARQL endpoint that we want a JSON object as a response. For the sake of simplicity we iterated over the json object using a for, but a more jQuery-ish would be using the $.each() method as can be seen in the following code:

<script type="text/javascript">
$(document).ready(function() {
var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
                   select distinct ?date where {\
                       graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {\
                           <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .\
                       }\
                  }';
$.ajax({
     dataType: 'jsonp',
     jsonp: 'callback',
     url: 'http://logd.tw.rpi.edu/sparql',
     data: {
         query: datesQuery,
         output: 'sparql',
     },
     success: function(data){
       $.each(data.results.bindings, function(i,item){
         $("#results").append(item.date.value);
       });
    }
});
});
</script>

Full example

A full example is in the following code (you can copy & paste it).

<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
                                 prefix ds1033: <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/>\
                                 select distinct ?date where {\
                                   graph ds1033:1st-anniversary {\
                                     ds1033:1st-anniversary dcterms:modified ?date .\
                                   }\
                                }';
      $.ajax({
           dataType: 'jsonp',
           jsonp: 'callback',
           url: 'http://logd.tw.rpi.edu/sparql',
           data: {
               query: datesQuery,
               output: 'sparql',
           },
           success: function(data){
             $.each(data.results.bindings, function(i,item){
               $("#results").append(item.date.value + "<br/>");
             });
          }
      });
      });
    </script>
  </head>
  <body>
    <p>Datetimes when Dataset 1033 version 1st anniversary has been modified</p>
    <div id="results"></div>
  </body>
</html>

Linking Open Government Data

Menu

User login

Navigation

Share