Dispersion Design

< Back

Reading a JSON file in JavaScript using JQuery

2012-06-12

Introduction

JavaScript Object Notation (JSON) is becoming one of the most popular 'lightweight' formats for textual data exchange. JSON is based on standard JavaScript syntax, which makes it easy to read and debug for programmers already familiar with C, C++, Java or JavaScript. It’s simplicity has resulted in widespread adoption in many applications.

This article will explain how to use the JQuery framework in JavaScript to read a JSON formatted file using AJAX.

JQuery

Writing JavaScript that manipulates the Document Object Model (DOM) directly can be very difficult, as not all web browsers have identical DOM implementations. JavaScript libraries attempt to provide a solution to this, by providing a level of abstraction between the DOM and your code. The library then takes care of the inconsistencies between browsers.

JQuery is one of the most popular JavaScript libraries. You can use the JQuery library in your code by adding the following to the <head> section of your page:

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

Google maintains an API guide that lists all the APIs that are available on their servers for you to use.

AJAX Request

If you have ever tried to request a file using AJAX without using a JavaScript library, you will be familiar with the XMLHttpRequest() function and you may have used code that looks like the following:

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try
{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{
	try
	{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
	catch (E)
	{ xmlhttp = false; }
}
@end @*/
// and so on...

JQuery simplifies the task of creating an AJAX request considerably. Now all that is needed is a single $.ajax() function call:

($.ajax({
	url: requestURL,
	success: function (data) {
		// Process data here
	}
}));

So, the contents of a file could be inserted into a page with the following code:

var dest = $('#destination');

($.ajax({
	url: 'file.txt',
	success: function (data) {
		dest.html(data);
	}
}));

Reading JSON with JQuery

Once you know how use JQuery to fetch a file using AJAX, reading a JSON file is quite simple. All that you need to do is set the dataType parameter in the AJAX request. For example:

($.ajax({
	url: 'file.json',
	dataType: "json",
	success: function (data) {
		alert(data);
	}
}));

Provided the JSON file was able to be parsed correctly, the data variable that is passed into the success function will contain a proper JavaScript object that matches the structure of the JSON file.