7.4. The young upstart: JSON

JSON is more about curly braces than the brackets you use in XML, but it can store all the same data that XML documents can:

"totals" is at the top-level, and contains the three other pieces of data.
Here's the JSON equivalent of the XML you looked at on the opposite page.
PHP script
 {"totals": [
    {
    "boardsSold": 1710,
There are three individual bits of data, each with a numeric value.
    "bootsSold": 315,
    "bindingsSold": 85
"boardsSold", "bootsSold", and "bindingsSold" are the names of each piece of data...
and 1710, 315, and 85 are the data values.
    }
]};

JSON is relatively new to the Ajax scene, but has a lot of big fans already.

You work with JSON using "normal" JavaScript.

7.4.1. You don't need a special object model to work with JSON data

Internet Explorer
                  Firfox

Web Browser

Opera
                 Safari


Mozilla


getNew Totals()

JavaScript

Here's some JavaScript that works with this JSON data.

function updatePage() {
   if (request.readyState == 4) {
    if (request.status == 200) {
     // Get the updated totals from the JSON response
    var jsonData = eval('(' + request.responseText + ')');
We'll look at how to get the JSON data from the server's response in just a few pages.
      var totalBoards =
totals[0] returns the first (and only) "totals" item.
   jsonData.totals[0].boardsSold;
    var totalBoots =
   jsonData.totals[0].bootsSold;
jsonData is the JSON data object.
     var totalBindings =
jsonData.totals[0].bindingsSold;
Once you have the right "totals" item, you can just use the name of the piece of data you
 want... boardsSold, bootsSold, or bindingsSold.
//Update the page with new totals

So JSON is just JavaScript, right? I don't need to worry about the DOM, or some toolkit... I can just use JSON in my code sort of like I'd use an array.

7.4.2. JSON is just JavaScript

JSON is just a way to represent objects in JavaScript. In other words, JSON is JavaScript. You don't need to work with the Document Object Model, or any other toolkit, to use JSON in your JavaScript code.

In fact, you can work with data that's a lot trickier than the simple set of values you've seen so far... let's see how Katie and Boards 'R' Us can break their sales data down a little further...

JSON is JavaScript.

Here's a little more JSON. This time, the Boards 'R' Us sales are broken up by city.
    {"totals": [
The first row is totals[0], the second is totals[1], and so on...
    {"location":"Vail", "boardsSold":642, "bootsSold":86, "bindingsSold":19},
    {"location":"Santa Fe", "boardsSold":236, "bootsSold":45, "bindingsSold":32},
    {"location":"Boulder", "boardsSold":453, "bootsSold":90, "bindingsSold":16},
    {"location":"Denver", "boardsSold":379, "bootsSold":94, "bindingsSold":18}
   ]};
...uses this JSON data...

This JavaScript...
    // Get the updated totals from the JSON response
    var jsonData = eval('(' + request.responseText + ')');
var totalBoards = jsonData.totals[0].boardsSold +
    jsonData.totals[1].boardsSold +
    jsonData.totals[2].boardsSold +
    jsonData.totals[3].boardsSold;
...to get Boards 'R' Us sales totals.
The JavaScript gets the boardsSold from each location, and adds them together to get an
overall total.
var totalBoots = jsonData.totals[0].bootsSold +
    jsonData.totals[1].bootsSold +
    jsonData.totals[2].bootsSold +
    jsonData.totals[3].bootsSold;
The same thing is done with the boots and the bindings... each location is accessed by
an index, like an array, and then the values in that location are used.
var totalBindings = jsonData.totals[0].bindingsSold +
    jsonData.totals[1].bindingsSold +
    jsonData.totals[2].bindingsSold +
    jsonData.totals[3].bindingsSold;
You don't even have to convert these values from strings... JavaScript knows that they
are numbers and treats them that way automatically..
// Update the page with new totals