Getting Started with jQuery and JSON

August 19th, 2012

If you’re passed to absolute beginner stage of learning JavaScript, I’m sure that you’ve at least of of JSON, even if you don’t know exactly what it is. JSON, or JavaScript Object Notation, is pretty much a JavaScript based alternative to XML. I think two of the main reasons for JSON’s popularity is, first, it’s a lot less verbose than XML and secondly, if you’re like me and you’re writing a lot of JS, then it’s easier to work with JSON because it’s pretty much just a JavaScript object.

Let’s compare XML to JSON so you can see what I’m talking about. First, the XML version of some data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<people>
    <person>
        <firstName>Clark</firstName>
        <lastName>Kent</lastName>
        <job>Reporter</job>
    </person>
    <person>
        <firstName>Bruce</firstName>
        <lastName>Wayne</lastName>
        <job>Playboy</job>
    </person>
    <person>
        <firstName>Peter</firstName>
        <lastName>Parker</lastName>
        <job>Photographer</job>
    </person>
</people>

The main thing that jumps out at you about XML is all the openning and closing tags. There’s about 75% tags to actual data in there. Let’s look at the same thing in JSON:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "person": [
        {
            "firstName": "Clark",
            "lastName": "Kent",
            "job": "Reporter"
        },
        {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "job": "Playboy"
        },
        {
            "firstName": "Peter",
            "lastName": "Parker",
            "job": "Photographer"
        }
    ]
}

Two things, it’s a lot easier to read and it looks like JavaScript so it will probably be a lot easier for you to work with. Alright, now we have our JSON file, how do we use it? We’re going to use jQuery because it just makes it easier to start out. We’ll use jQuery’s nicely built in getJSON function to make all this work.

1
2
3
4
5
$(function() {
    $.getJSON('people.json', function(data) {

    });
});

First off, we call the getJSON through jQuery not on a jQUery object in the DOM. This because this is actually a jQuery function not a method. A function is something like myFunction() which you can call on its own whereas a method would be element.myMethod() which is something you have attached to an object. $(‘a’).on() is a jQuery method.

So we’re calling the getJSON function and we’re passing two things to it. First, we’re passing the file we want to load, in this case ‘people.json’. And then we’re passing the callback function we want to run if we’re successful in loading the JSON file. You’ll notice that we’re also passing something called data to our callback function, this is the data that we’ll get from the JSON file. We need to pass it to the callback function so we can actually do something with it.

1
2
3
4
5
6
7
$(function() {
    $.getJSON('people.json', function(data) {
        $.each(data.person, function(i, f) {
           
        });
    });
});

Next we use jQuery’s each function which iterates through the person array in our JSON file and then we pass a callback function that we pass i which is the index and f which I just use as a shortened version of field. In this example we won’t be worrying about i, we’ll just be concentrating on f.

1
2
3
4
5
6
7
$(function() {
    $.getJSON('people.json', function(data) {
        $.each(data.person, function(i, f) {
            $('body').append('<p><span>Name:</span> ' + f.firstName + ' ' + f.lastName + '<br><span>Job:</span> ' + f.job + '</p>');
        });
    });
});

Finally, we append to the body tag a p tag that ends up giving us this:

1
2
3
<p><span>Name:</span> Clark Kent<br><span>Job:</span> Reporter</p>
<p><span>Name:</span> Bruce Wayne<br><span>Job:</span> Playboy</p>
<p><span>Name:</span> Peter Parker<br><span>Job:</span> Photographer</p>

I’m sure someone out there is thinking, I could have just stored the data in the JSON file as an array in my JS code and not had to worry about loading anything. In our simple example, that would have worked, but what if you have 600 lines of JavaScript and there’s 20 people in our person array? That could lead to a really cluttered file. This way we can keep everything separate and organized. And we can also have server side code send data to our JavaScript formatted as JSON so that we can use it. The Twitter search API is a great example of this.

Hopefully this explains the basics of using JSON and jQuery together. Next time we’ll create a more complicated example that would closer to something you’d use on a real site or app.

One Response to Getting Started with jQuery and JSON

  1. Sara says:

    Your blog is awesome! Well done! and THANK YOU or explaining this, most websites talk about jQuery, json and xml as if the reader already knows about them, but you explain everything in detail and in such a simple manner which makes it easy for Javascript beginners such as myself to learn and understand.
    I hope u post so much more articles about storing/retrieving data in web apps using jquery, and maybe some server-side too?
    Thanks again, and very well done!
    I subscribed to your RSS feed :)

    -Sara.

Leave a Reply

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