Web Scraping & Parsing HTML to XML in Javascript

Today I was working on a customer POC and happened to create few Google gadgets to visualize selected data sets from *.gov.uk sites. The scenario which is implemented was, mixed with inter-gadget communication and content search over data.gov.uk sites. I created three simple gadgets which communicates with each other, and one acted as the controlling gadget which pushed the search parameters to other two gadgets. The two content gadgets showed UK (1) primary school information and (2) electoral information. The pushed parameter was the postal code of different parts of UK. The direct.gov.uk has a form based implementation of this.

The Requirements for the POC was, simple and we already had working samples of such a scenario at WSO2 library.

  1. Show how one gadget can pass the context to other gadgets
  2. How gadgets can harvest data in various formats (in my previous post I explained on how to get data from RDF endpoints, which are also available in *.gov.uk sites)

The building blocks for the implementation was the search url, which was quite straight forward. for all the requests based on postal codes the direct.gov site served in the same manner (because of this important fact, the automation process became trivial). for an instance the url for primary school information retrial was,


Where the param “text” changed according to the postal code. So far everything seemed straight forward, however at implementation, while using Gadgets API for content retrial, I faced problems in parsing text with javascript. Hence the gadgets.io.makeRequest supported HTML as text and the API method returned the retrieved HTML document as string making it quite impossible to process.

With some thinking and advise, I brought the Mashup Server in to the picture and used it to retrieve the data from the gov site and returned the result in XML format. Using the Mashup Server web scraping seems to be a piece of cake, We created a simple mashup using the scraper host-object and captured the result set in the search result page. The mashup code as follows,

function search(searchUrl) {
	var scraper = new Scraper(
	return new XMLList(scraper.response);

And finally the two gadgets were making service calls to the mashup service and retrieved the data as an XML object, making the data processing painless. The final version at the Gadget Server looked quite appealing.

WSO2 Gadget Server with UK gov data
Gadget Server look - in the end

Special thanks goes to Ruchira for helping me out with the mashup service πŸ™‚ You can download the Gadget code and the Mashup service and try the scenario yourself.


I integrated the facebook “like” button to my blog

I just integrated the facebook’s new like button, there was an easy to use plug-in for wordpress so I didnt have to make any code level changes to my template. So if you guys also thinking of integrating the social feature you might want to read this, this and this. πŸ™‚

And for all you people who are too lazy to comment on posts, can now, just click on “like” and give me a heads up πŸ˜€

Too many “Big Brothers” – Back to stone age ?

I am sure you have heard about the phrase “Big Brother is watching you”, and maybe read “Nineteen Eighty-Four” by George Orwell. But how many of you, realized that we are the very civilization Orewell describes in his novel which is completely kept under surveillance. Well it may sound bit harsh for now, but that day seems to be not that far away.

We live in the information era where we need to understand, that measurement of power is defined by the amount of knowledge and information we possess. We start our day, by checking our mails before we brush our teeth (Yeah that’s me, and I know few more like me πŸ˜› ). We tweet about what we do, what we read, what we hear tagged with our location using geo-tagging. What ever we hear that we do not know, or if we are curious about something (maybe, Paris Hilton’s Sex Tape or about government corruption) we simply google. and as social beings, rather than hanging out with few friends on a Friday night, we comment and gossip around in facebook. So by doing all this we gather information about others, about things and knowledge about new development. As the result we become strong and well connected and that’s the beauty of it.

But the bigger picture is quite scary. Even how strong we become with information and knowledge there will always a stronger person, who will know all about you, from the day you started gathering information and that is the reality of the information age. There will always be a “big brother” who is watching you.

The funny thing is, at present the internet space is full of “big brothers”. Every e-business is trying to know about you and me and graph our social connections. However we should also understand that “Nothing in Life is Free”, nor service is a charity. Google provide us with search results and they make money out of advertising on us. facebook and twitter are the same and now they are at war (With facebook like, connect pushing out to the entire web) simply to own our activities on the web. Whoever wins, each one of them possess great power with regard to information they own. I think this is where we can say “Great power comes with great responsibility” and be blind about the facts.

In my opinion, going back to the stone age is not the answer. as member of the information society we should be aware of our rights, we should read the privacy statement of the e-Business we consume and one of my colleagues said today, “if you are planing to be the next president of the state, do not build up a facebook profile with all your most personal details, it might backfire” πŸ˜€

Mashing up RDF data with WSO2 Mashup Server

Okey so this is the fun part that I promised to write about :D. I managed to cook up a use-case to demonstrate RDF querying and making use of the semantic data. The data that I am using for querying, is the rdf data sources available in the UK data.gov site. With some analysis I figured out that this task can be fundamentally archived using the combination of Mashup and Gadget Technologies. My choice of tools were WSO2 Mashup Server and WSO2 Gadget Server for their great flexibility and of cause for other obvious reasons :D. However the Mashup Server does not natively support RDF data retrieval, hence I had to do some work to get such functionality integrated. The great fact about the mashup server is its extensibility, the concept of host objects and the ability to write custom host objects and its pluggable nature comes handy in such cases. The high level architecture of what I am trying to achieve is as follows.

RDF data retrival with WSO2 Mashup server / WSO2 Gadget Server

To implement the above architecture with the tools at hand I created a custom host object that can be plugged to the Mashup Server. When dealing with semantic web related tasks and RDF data handling HP’s Jena java library comes in handy. With the use of Jena-ARQ (for SPARQL) api I managed to get the host object working with few lines of code.

            Dataset dataSet = DatasetFactory.create(sparqlObject.rdfDataSource);
            // Create a new query form a given user query
            String queryString = sparqlObject.spaqrlQuery;
            Query query = QueryFactory.create(queryString);
            QueryExecution qe = QueryExecutionFactory.create(query, dataSet);
            ResultSet results = qe.execSelect();
           resultString = ResultSetFormatter.asXMLString(results);
..... OR.....
           ByteArrayOutputStream bos = new ByteArrayOutputStream();
           ResultSetFormatter.outputAsJSON(bos, results);

With the host object in place, the next task was to create a Mashup in-order to query the rdf data with a given source (EndPoint or data source). The javascript service (Mashup) is created to serve this purpose, where the consumer can specify the RDF endpoint or the data source with the SPARQL query and retrieve the dataset in XML or JSON.

function RdfDocQueryService(rdfDataSource, rdfQuery, resultType) {
   var sparqlObj = new SparqlHostObject();
   sparqlObj.rdfDataSource = rdfDataSource;
   sparqlObj.spaqrlQuery = rdfQuery;
   sparqlObj.resultType = resultType;
   return new XML(sparqlObj.getDataFromRdfSource());

Finally to bind everything together, lets try querying some data. My example usecase is to use the query at N2 blog to retrieve traffic monitoring points in UK roads. The query to retrieve the data set as follows,

#List the uri, latitude and longitude for road traffic monitoring points on the M5
PREFIX road:
PREFIX wgs84:
SELECT ?point ?lat ?long WHERE {
  ?x a road:Road.
  ?x road:number "A4"^^xsd:NCName.
  ?x geo:point ?point.
  ?point wgs84:lat ?lat.
  ?point wgs84:long ?long.

To visualize these points I have created a gadget with the aid of Google Maps api. This gadget can be hosted in the Gadget Server, where it can dynamically retrieve traffic monitoring points for each road in the UK and display them in the map as follows.

Traffic points in A4 road, UK

The Semantic Web

For the past week or so I was able to work with data.gov.uk to find a possibility to make use of government/public data for a nice sample gadget, that will work in the Gadget Server. However it is quite disappointing to see most of these data are in lengthy PDF files, and without some expensive processing these data could not be consumed easily. The happy scenarios in my mind was, that there will be a bunch of RESTfull web services where I can request for public data and in return I will get the result set in XML or (and if am really lucky) in JSON πŸ˜‰

After some browsing over the data in the UK data site, There was one interesting area which is called SPARQL and that was my moment of joy :D. there were six government data endpoints which I can query against and the result set can be retrieved as XML or JSON. This was the ideal scenario, even the available data is limited, there it starts the story of the Semantic Web.

When I was reading for my bachelor’s thesis, under service orchestration and chirography, the concepts of semantic web (services) were discussed in length. However the idea is still in its early stages, and there is still no real business use-case for it. The very purpose of semantic web is that the resources of the WEB and there relationships can be self explained and explored.

Self Explainable RDF graph

I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A β€˜Semantic Web’, which should make this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The β€˜intelligent agents’ people have touted for ages will finally materialize.

– Tim Berners-Lee, 1999

The UK data site has offered chunks of eduction, transport, financial, environmental, analytical and statutory notices as RDF data endpoints which can be queried using SPARQL (SPARQL Protocol and RDF Query Language).

So why let this great opportunity to lay dry, my idea was simply to use these endpoints and query these data and display them in some gadgets, for instance with transport data we can draw traffic details in maps, or with financial and educational data we can create some graphs and charts.

But with some thought, WHY NOT go for mashing up, We have a great tool (WSO2 Mashup Server) just made for that. So I was cutting code for the past whole week to create a custom host object in the Mashup Server to query RDF (RDF Service endpoints or RDF Data sources) data, and am almost done, the host object is created, two mashup services are created (Query a RDF endpoint/and RDF data source) now its a matter of integrating the services with Google Maps API and visualize them as a gadget in the Gadget Server.

So yeah the good stuff will be in the next post. keep tuned πŸ˜€