• Choose a category
• All
• Classic-Fiction

♦ The entire element is one big variable. JavaScript can see the entire element as one big JavaScript object that can be stored in a single variable. This makes it quite easy to work with JSON objects on the client.

Reading JSON data with jQuery

As you might expect, jQuery has some features for simplifying the (already easy) process of managing JSON data.

Figure 6-5 shows readJSON.html, a program that reads JSON data and returns the results in a nice format.

Figure 6-5: This program got the data from a JSON request.

Here’s the complete code of readJSON.html:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Reading JSON

Managing the framework

The foundation of this program is the standard XTML and CSS. Here are the details:

1. Build a basic XHTML page.

Much of the work will happen in JavaScript, so an h1 and an output div are all you really need.

2. Put default text in the output div.

Put some kind of text in the output div. If the AJAX doesn’t work, you’ll see this text. If the AJAX does work, the contents of the output div will be replaced by a definition list.

3. Add CSS for a definition list.

I print out each pet’s information as a definition list, but I don’t like the default formatting for

. I add my own CSS to tighten up the appearance of the definitions. (I like the

and

on the same line of output.)

Retrieving the JSON data

The jQuery library has a special AJAX function for retrieving JSON data. The getJSON() function makes an AJAX call and expects JSON data in return:

$(init);

function init(){

$.getJSON(“pets.json”, processResult);

} // end init

It isn’t difficult to get JSON data with jQuery:

1. Set up the standard init() function.

In this example, I’m pulling the JSON data in as soon as the page has finished loading.

2. Use the getJSON() function.

This tool gets JSON data from the server.

3. Pull data from pets.json.

Normally you make a request to a PHP program, which does some kind of database request and returns the results as a JSON object. For this simple example, I’m just grabbing data from a JSON file I wrote with a text editor, so I don’t have to write a PHP program. The client-side processing is identical whether the data came from a straight file or a program.

4. Specify a callback function.

Like most AJAX methods, getJSON() allows you to specify a callback function that is triggered when the data has finished transferring to the client.

Processing the results

The data returned by a JSON request is already in a valid JavaScript format, so all you need is some for loops to extract the data. Here’s the process:

function processResult(data){

$(“#output”).text(“”);

for(petName in data){

var pet = data[petName];

$(“#output”).append(“