Convert XML to JSON | Quick Tip

By | May 19, 2011

Quick tip on changing XML to JSON for easier parsing of feeds. So I’m at work trying to bring in an RSS feed and parse it onto the site. But every time I try, I get an error. The response is OK but there is no data in the XML object. So after some digging around I find that its a bit hit and miss using xml cross domain. If the headers haven’t been set correctly then the object response will be empty and we get this message in firebug. So what’s the answer?? Google is the answer to all our problems!!! Or to be more precise the Google Feed API. This just takes all the hassle out of it.

View Demo 1Download Source

Change XML to JSON with Google Feed API

If you are like me and think that all cross domain stuff should be done with JSON and just love to work with it then this is the method for you. So for the example, in a bout of shameful promotion, we’ll use my own RSS feed. Now this could be the original feed or as we’re going to use my feedburner feed. To create a feedburner feed you create an account then add the url’s of the feeds you want to burn and they in turn give you a feedburner url which you can promote. Why do this? Well if you have a lot of people follow your rss then feedburner is ideal as it caches the feed thus creating less strain on your server. Also there are lots of tracking options so you can see at a glance how many people have signed up to your feed.

The HTML






Convert XML to JSON


Latest Posts

So we set up a simple page with a wrapper div for style one other div with an id of #post results that we are going to place all our posts in. Next we include a script tag that loads our external javascript file and finally at the bottom in another script tag we called the Google api and pass it the url of our feed. So I’ll talk you through it. Firstly we wait until the window had loaded. Then we call a function ( that we have defined in our external javascript file and that we will look at shortly) and pass in the google feed api url.

https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=

the q= at the end of this url means the next peice of the url is a query an this bit is our feed url

http://feeds.feedburner.com/myhtmlcodes

So this puts our feed through the google api and the api outputs a json document that we can then parse with javascript and write to our html page.
I’m not going to show you the CSS because it is not relevant to this post.

The Javascript

var getFeed = function(feed) {
	var url = feed;
	url += "&callback=parse_res"
	var scripttag = document.createElement("script");
	scripttag.setAttribute("type","text/javascript");
	scripttag.setAttribute("charset","utf-8");
	scripttag.setAttribute("src",url);
	document.getElementsByTagName("body")[0].appendChild(scripttag);
}

var parse_res = function(data) {
	var entries = data.responseData.feed.entries;
	var container = document.getElementById("post_results");
	var list = document.createElement("ul");
	while (container.hasChildNodes()) {
		container.removeChild(container.lastChild);
		}
	 for (var i=0; i

The getFeed function take the url that we gave it and adds a callback function called "parse_res". the callback function will fire when the response has come back from the server. Next we dynamically create a script tag and add it to the end of the body tag. This is a technique used by google with the analytics script to ensure that the javascript here fire last (after the DOM has loaded). Because I placed the initial function in a window.onload event this isn't absolutely necessary but its a good safety catch and if google do something similar then it cant be that bad.
Next in the parse_res function we create a variable that hold all the entries from the feed (basically this is all the post information. then we get the div with the id of post_results and put that in a variable. Then we create and unordered list element (these are all our containers.). then we create a for loop and for each of our posts we create a li tag, an a tag and we populate these with links and titles from the feed. then we append these to the unordered list and the add that to the container variable.
And thats it. It was a quick tip so sorry if I didn't go into that javascript to deeply but it was really to show how easy it is to transform data from XML the Json with google API and then get it onto the page. All the source code is available to download.

View Demo 1Download Source

One thought on “Convert XML to JSON | Quick Tip

Leave a Reply

Your email address will not be published. Required fields are marked *