Parse JSON with jQuery and JavaScript
Last week I posted a tutorial using jQuery and XML. The response has been overwhelming, but I have received several “suggestions” regarding the use of XML instead of JSON. Not wanting to neglect developers who are interested in exploring all the options, I am following up with a jQuery and JSON tutorial.
If you are unfamiliar with JSON, then I suggest you take a few minutes and have a look at JSON.org, or the Wikipedia entry for JSON. If you have used JavaScript object literal notation, then you should recognize the syntax. For this example I will be using JSON that loosely defines a data structure much like an RSS feed.
A ZIP file is available for download at the end of this post, and it contains the XHTML, JavaScript and JSON file referenced here.
JSON:
{
"channel": {
"title": "d'bug",
"link": "http://blog.reindel.com",
"description": "d'bug shares tips, tricks, and advice with Web development professionals",
"published": "Thu, 02 Oct 2007 12:00:00 +0000",
"language": "en",
"items": [{
"title": "The evolution of the API, or, the publisher's dilemma",
"url": "http://blog.reindel.com/2007/09/20/the-evolution-of-the-api-or-the-publishers-dilemma/",
"published": "Thu, 20 Sep 2007 11:58:06 +0000",
"author": "Brian",
"category": "Technology",
"guid": {
"isPermaLink": false,
"url": "http://blog.reindel.com/2007/09/20/the-evolution-of-the-api-or-the-publishers-dilemma/"
},
"description": "I love watching the movie The Thing. The film I speak of would be John Carpenter's 1982 remake, and not the 1951 classic, The Thing from Another World. Eleven men are holed up in an Antarctic science research facility, and come face-to-face with an alien organism buried beneath the ice. The special effects are reminiscent [...]"
},{
"title": "Export data to a CSV file using only the MySQL command prompt",
"url": "http://blog.reindel.com/2007/09/19/export-data-to-a-csv-file-using-only-the-mysql-command-prompt/",
"published": "Wed, 19 Sep 2007 11:23:24 +0000",
"author": "Brian",
"category": "MySQL",
"guid": {
"isPermaLink": false,
"url": "http://blog.reindel.com/2007/09/19/export-data-to-a-csv-file-using-only-the-mysql-command-prompt/"
},
"description": "Recently our marketing department has been running a series of promotions as contests. The system is setup to receive entries, but for the present time we will not be building an administration interface. The entries will instead be extracted into a CSV file manually when the contest deadline has passed. Up until this point I [...]"
},{
"title": "Were you born to be a programmer?",
"url": "http://blog.reindel.com/2007/09/17/were-you-born-to-be-a-programmer/",
"published": "Tue, 18 Sep 2007 02:05:04 +0000",
"author": "Brian",
"category": "Web Development",
"guid": {
"isPermaLink": false,
"url": "http://blog.reindel.com/2007/09/17/were-you-born-to-be-a-programmer/"
},
"description": "Reading blog posts that highlight the career paths of programmers is of great interest to me. Although, I do find that most of these diatribes evolve (or decay -- whichever you prefer) into rather grandiose descriptions of past computing exploits. You could easily be led to believe that most programmers leave the womb clamoring for [...]"
}]
}
}
While exploring the options for traversing JSON, I discovered that there is no official W3C documentation, or even a draft. As a subset of the ECMAScript language specification, it will probably remain under the governance of ECMA International.
So unlike XPath, which is a commonly accepted language for traversing XML, JSON must rely on JavaScript’s object notation. As such, some custom JavaScript will always be required (i.e. - no jQuery selectors). Some progress has been made in addressing the overarching need, but I maintain a high level of specificity in the following snippet.
jQuery/Javascript:
$(function() {
$.getJSON("jrss.js", function(json) {
/* Parse JSON objects */
jJSON["isPermaLink"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.channel.items,function(i,item) {
if (item.guid.isPermaLink != "undefined") {
response.count++;
response.values[i] = item.guid.isPermaLink;
}
});
return response;
})();
jJSON["title"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.channel.items,function(i,item) {
if (item.title != "undefined") {
response.count++;
response.values[i] = item.title;
}
});
return response;
})();
/* Return a number of values for a given object */
alert( jJSON.getValues("title",null) );
/* Return a count for a given object */
alert( jJSON.getCount("isPermaLink") );
/* Return a number of randomized values for a given object */
alert( jJSON.getRandomValues("title",null) );
});
});
While considering how best to tackle objects in JSON, I realized that it is rarely ever necessary to use expressions to filter data. Each site will have a schema, and the format of the data will often be known and documented. You will almost always know exactly what you want. So instead of creating custom selectors, I scripted a function for grabbing each individual value. These values are stored in the jJSON object using the name of the JSON key as the reference.
Getting JSON using jQuery is extremely straightforward. Just like $.ajax(), there is a $.getJSON() method, with a call to a file, and a function to pass the data through for parsing. The common $.each() method in jQuery can be used to traverse the “nodes” (keys) that you indicate. You could just as easily use your own for loop.
At first glance it seems I could have refined each reference to a self-invoking function into a single function call. However, you must consider that grabbing data from XML is quite different than grabbing data from JSON. While there is still a parent/child relationship, a child in JSON could be a different type, like an array. There might be several arrays throughout the structure. Simply using the dot operator becomes impossible, and getting different keys can be a unique process.
Each key in jJSON references another hash object with two keys, called values and count. Accessing values will return an array of values, and count will tell you how many of that particular reference exists. For example, how many isPermaLink or title key references were obtained from the JSON.
jQuery/Javascript:
var jJSON = {
getValues: function(obj,num) {
return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num));
},
getCount: function(obj) {
return jJSON[obj]["count"];
},
getRandomValues: function(obj,num) {
var a = [];
var b = jJSON[obj]["values"];
var c = b.length;
if (num != null && num < c) {
c = num;
}
for (i = 0; i < c; i++) {
var e = Math.floor(Math.random() * b.length);
a[i] = b[e];
b.splice(e,1);
}
return a;
}
};
Along with the key references added to the jJSON object, there are three helper methods. The getValues method will return a number of values for a given object key as an array. If you pass in null as the second parameter, you will receive all values. The getCount method will return a count for a given object key. Finally, the getRandomValues will return a number of randomized values for a given object key.
Admittedly, the explanation here might seem a bit winded, but there is a lot to digest. I invite you to download the complete tutorial, and work through it, changing and modifying values. If you do not have an intermediate command of the JavaScript language you might have difficulty, but it can still be a rewarding experience comprehending the code snippets.
Posted by Brian
October 2nd, 2007
Leave a Comment
Comments are moderated. No profanity. Only <a>...</a>, <blockquote>...</blockquote>, and <code>...</code> are allowed.
Seperate paragraphs by pressing the "Enter" key twice, or press it once to break to a new line.
21 Comments
#01, Oct 02 2007
Ajaxian » Ajaxian Featured Tutorial: Parse JSON with jQuery and JavaScript
[…] In his tutorial, Parse JSON with jQuery and JavaScript, Brian takes you step-by-step through the process of retrieving and parsing a JSON packet: Getting JSON using jQuery is extremely straightforward. Just like $.ajax(), there is a $.getJSON() method, with a call to a file, and a function to pass the data through for parsing. The common $.each() method in jQuery can be used to traverse the “nodes†(keys) that you indicate. You could just as easily use your own for loop. […]
#02, Oct 02 2007
Ajaxian Featured Tutorial: Parse JSON with jQuery and JavaScript « outaTiME
[…] In his tutorial, Parse JSON with jQuery and JavaScript, Brian takes you step-by-step through the process of retrieving and parsing a JSON packet: Getting JSON using jQuery is extremely straightforward. Just like $.ajax(), there is a $.getJSON() method, with a call to a file, and a function to pass the data through for parsing. The common $.each() method in jQuery can be used to traverse the “nodes” (keys) that you indicate. You could just as easily use your own for loop. […]
#03, Oct 02 2007
Matt
I am a little confused by this blog entry. The point of JSON is that it *is* JSON, aka JavaScript Object Notation. So, can’t we do this in two steps?
1) Dangerous for security sake, but:
var jsonobj = eval(jsonstr);
2) Write a very generic routine to query the object:
function jsonQuery(jsonobj, query){
try{
return eval(jsonobj+’.'+query);
}catch(exception){
return null;
}
}
Of course, you could provide a more intelligent query method that would actually walk the jsonobj recursively, narrowing down the query, and return the lowest level of match, and support object arrays and all that good stuff.
In effect, that is just string parsing for the query, and has nothing in particular to do with JSON itself.
#04, Oct 02 2007
Brian
Hi Matt,
In essence, you are correct about #1. If it is a trusted source, then you can simply evaluate the string. The additional benefit of using jQuery for this process is that when the JSON is passed through, it can be further evaluated with the $.each() method, and you get an index (i) for counting.
As far as #2, I wish it were that easy. Unfortunately, in JSON, objects contained in another object type of array cannot be referenced with dot notation - you must specify an index. Using the JSON above for example:
channel.items[0].title
I cannot simply reference this as:
channel.items.title
If there were several arrays within objects within arrays, it becomes increasingly difficult without the use of an expression. Compare this with using XPath to parse XML.
/channel/items/title
That returns me an array of all titles in items that I can now loop through. I hope that doesn’t muddy the waters further.
#05, Oct 02 2007
Matt
Brian,
Exactly, whenever you deal with JSON, you need to be aware if you trust your source. Especially if you intend to eval a property. To your point though, you mention the indexed item. I agree with this, which is why I mentioned more detailed string parsing of the query string. To your example, I would suggest writing your query as “channel.items[0].title”. The code I gave only works with two constraints:
Dot notation, not ‘/’ delimiters.
It is explicit only, it cannot deal with a wildcard.
If you do want wildcards and array-type results and all that good stuff, then you have to advance the query routine to parse the query string as if it is an instruction, not a simple index into an object dictionary.
Does that sound correct?
#06, Oct 02 2007
Brian
The JavaScript nomenclature can be confusing at times. I always try to be consistent in how I refer to syntax, but sometimes I do a poor job. The following is the most often accepted terminology:
* JSON is a hash containing key/value pairs.
* The values in JSON can be of several types, such as array, string, integer, or another hash.
* The word object can be used to describe several things in JavaScript. An array is an object, so is a hash, and so is a function.
#07, Oct 02 2007
Matt
Brian,
One other item you might like that I ran across some time back. Someone has done the hard work (albeit in Java and not in Javascript — I bet it could be simplified a lot for Javascript) called JXPath. This project is for using XPath to query Java objects at runtime.
If someone was to port this kind of utility to Javascript, they would probably become very popular. :-)
Learn more about JXPath
#08, Oct 02 2007
Brian
Matt,
You are spot on — if you are interested (not sure if you checked it out already), a wildcard expression search is available for JSON called JsonPath. I have never used it, but it tries to emulate what we have been discussing.
#09, Oct 02 2007
Brian
Thanks for the link Matt. I wish I had that kind of time! Even so, I work in the world of Java, so having something like this handy is a big help.
#10, Oct 02 2007
Ned Batchelder
There is no W3C spec for JSON, but there is an IETF RFC: http://www.ietf.org/rfc/rfc4627.txt
#11, Oct 02 2007
napyfab:blog» Blog Archive » links for 2007-10-02
[…] Parse JSON with jQuery and JavaScript » d’bug (tags: jquery json javascript tutorial webdev web development parser parsing) […]
#12, Oct 02 2007
Javascript News » Blog Archive » Ajaxian Featured Tutorial: Parse JSON with jQuery and JavaScript
[…] In his tutorial, Parse JSON with jQuery and JavaScript, Brian takes you step-by-step through the process of retrieving and parsing a JSON packet: Getting JSON using jQuery is extremely straightforward. Just like $.ajax(), there is a $.getJSON() method, with a call to a file, and a function to pass the data through for parsing. The common $.each() method in jQuery can be used to traverse the “nodes†(keys) that you indicate. You could just as easily use your own for loop. […]
#13, Oct 02 2007
Parseando JSON con jQuery | aNieto2K
[…] ellas, es el parseo de JSON. En este tutorial te muestran como tratar el JSONde un RSS. Compártelo # « Juegos Javascript para tu iPhone/iPodTouch […]
#14, Oct 03 2007
links for 2007-10-03 « [[ the sirens of titan ]]
[…] Parse JSON with jQuery and JavaScript » d’bug useful jquery json bridge (tags: ajax development javascript jquery json parser parsing) […]
#15, Oct 03 2007
links for 2007-10-03 « toonz
[…] Parse JSON with jQuery and JavaScript » d’bug (tags: jquery ajax) […]
#16, Oct 17 2007
Primeros pasos con JSON » AOWS
[…] resultando todo incluso más sencillo que con XML. Un tutorial más completo: Parsear JSON con jQuery y JavaScript ajax, javascript, jquery, json, php, xml […]
#17, Nov 23 2007
carlos
Intento usar la lib json
pero no funcionan los acentos y eñes el resultado del encode del json ya me devuelve mal los datos.
mucho busque la solución pero no la encuentro
ej:Asociacin00200053agrada Familia de Burdeos
ya no se q hacer…
#18, Jan 18 2008
estetik
jQuery is an exceptionally clever piece of engineering. It neatly encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default. It takes a core abstraction—that of a selection of DOM elements—and extracts as much mileage out of it as possible. Most importantly, it does so in a way that obeys best practices and plays well with other JavaScript code.
jQuery does add very useful Array and String methods, see:
$.map, .filter, .grep, .trim, .merge
And there is also .extend for further methods and plugins.
I can see we need to continue posting articles on the power of jQuery, because some coders (ahem) have not paused to see how much time and effort they can save with a few simple lines of jQuery code.
#19, Mar 24 2008
jQuery.getJSON « Mashuphowto’s Weblog
[…] jQuery and XML revisited Parse JSON with jQuery and JavaScript […]
#20, Apr 01 2008
Amit Yadav’s Blog » Blog Archive » Parse JSON with jQuery and JavaScript
[…] a JSON with jQuery for my project, i had no idea whatsoever about doing this, but ultimately this article saved me, i really thank him for the code. Here i will tell you people how to do […]
#21, May 15 2008
Hunka
I was looking for such example of using JSON for my project. Thanks