Loading JSON with jQuery

I love using external JSON files for data configuration. Maybe it’s my old XML/XSL training, but there’s something solid about separating the content and presentation layers. That said, you need to set up your JSON in a clean and solid format to make it as future-proof as possible (we’ll cover that another day).

Loading an external JSON file on the same domain

This is the easiest way, since you control the whole kit and caboodle.

The JSON


{
	"books":[
		{
			"title":"Life of Pi",
			"author":"Yann Martel",
			"published":"2003",
			"ISBN":"978-0156027328",
			"read":true
		},{
			"title":"Wonder",
			"author":"R.J. Palacio",
			"published":"2012",
			"ISBN":"978-0375869020",
			"read":true
		},{
			"title":"A Heartbreaking Work of Staggering Genius",
			"author":"Dave Eggers",
			"published":"2001",
			"ISBN":"978-0375725784",
			"read":true
		},{
			"title":"The Book Thief",
			"author":"Markus Zusak",
			"published":"2007",
			"ISBN":"978-0375842207",
			"read":true
		}
	]
}

The Javascript


$.getJSON("/examples/books_json.js",function(data){				
	$.each(data.books, function(k,i) {
		document.write(i.title + ' by ' + i.author + '<br/>');
	}
});

Do whatever you want with the JSON that is now contained in the variable ‘data’

Note that data is currently scoped inside this getJSON function. You will have to pass it out (as a variable assignment or as a parameter in another function) to use it elsewhere. Also, anything contained inside the success part of the getJSON will not execute until the JSON has successfully loaded.

Loading an external JSON file on a different domain

Browsers are picky about where you get data from. As such, there are blocks on cross-domain transfers. To get around this, we have to use JSONP (JSON with Padding). The padding is a function wrapper that tricks the browser into working the way we want.

One major caveat is that you have to work with that other domain to set up the JSON correctly. If you control the code on both domains, you have a leg up on the problem. If you cannot change the data on the JSON side of the equation, you’ll have to tackle the problem another way (using a proxy). I’ll cover that in the next installment.

The JSONP

Note how it’s essentially the same as the above JSON, just with a function wrapper (or padding).


jpad({
	"books":[
		{
			"title":"Life of Pi",
			"author":"Yann Martel",
			"published":"2003",
			"ISBN":"978-0156027328",
			"read":true
		},{
			"title":"Wonder",
			"author":"R.J. Palacio",
			"published":"2012",
			"ISBN":"978-0375869020",
			"read":true
		},{
			"title":"A Heartbreaking Work of Staggering Genius",
			"author":"Dave Eggers",
			"published":"2001",
			"ISBN":"978-0375725784",
			"read":true
		},{
			"title":"The Book Thief",
			"author":"Markus Zusak",
			"published":"2007",
			"ISBN":"978-0375842207",
			"read":true
		}
	]
});

The Javascript


$.ajax({
	url:'http://www.brianrollins.com/examples/books_jsonp.js',
	dataType:'jsonp',
	jsonpCallback:'jpad',			
	success: function(data){
		$.each(data.books, function(k,i) {
			document.write(i.title + ' by ' + i.author + '<br/>');
		}				
	}
});

A couple of things I want you to notice:

First, see how that each loop is identical to the one above? The data comes back exactly the same as with the getJSON call on the same domain. Also, that variable, “data” is scoped just like it was before.

Second, we are using the generic ajax call instead of the getJSON call. I’ve seen examples of people using getJSON to do JSONP on other sites, however I have never gotten those examples to work in real life. Either I’m doing something wrong, or their code is out-of-date with current browser cross-domain security policies. (Feel free to comment or email me a workaround if you know of one).

Third, take note of that jsonpCallback. That has to match your wrapper in your JSONP file (for this example it’s “jpad”). A word of caution: That’s a function call. Do not use the same name for another function or variable in your code. It will cause problems. It’s certainly nothing insurmountable, but I have seen it bite a few devs on my team.

Links for Reference

2 comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.