JSON

What is JSON?

So now that we have our HTTP requests, how can we pass data between the browser and server? We use JSON! JSON is short for JavaScript Object Notation. JSON can convert any JavaScript object into readable text that can be sent to the server or vice versa. Because it can be created using almost any language, JSON objects are the most commonly used way to pass data through HTTP requests.

Example

Let's see an example using a superhero's profile in JSON.

{
    "name": "Superman",
    "age": 79,
    "secretIdentity": "Clark Kent",
    "powers": [
        "Super strength",
        "Heat vision",
        "Flight",
        "X-ray vision",
        "Super speed"
    ]
}

JSON Vs. JavaScript Objects

At first glance, you're might be thinking "Hey! This looks like a JavaScript object!". This is partially true, as the syntax is derived from JavaScript. However, there is a small but important difference involving the name part of a name/value pair.

Let's use our first item to demonstrate, first in JSON:

{
"name": "Superman"
}

If this were a JavaScript object, it could be written without the double quotes around name:

name: "Superman"

The reason this doesn't work for JSON is because JSON is a text-only-format, for consistency across multiple languages.

Minified JSON

JSON can be minified like CSS, JavaScript, and many other languages. Minified just means condensing information to make file sizes smaller, for more efficient loading over the web. Specifically, it is the process of removing all unnecessary characters from source code without changing its functionality.

Let's return to our superhero example to see exactly what is happening, first we'll see the JSON before it is minified.

{
    "name": "Superman",
    "age": 79,
    "secretIdentity": "Clark Kent",
    "powers": [
        "Super strength",
        "Heat vision",
        "Flight",
        "X-ray vision",
        "Super speed"
    ]
}

Minified JSON:

{"name":"Superman","age":79,"secretIdentity":"Clark Kent","powers":["Super strength","Heat vision","Flight","X-ray vision","Super speed"]}

Minifying removes all the extra white space in your code. No white space means a smaller file size and in turn faster/better performance. It may not seem like much, but those extra blank characters can make a huge difference in size when dealing with hundreds or even thousands of lines of code.