Gallery
Share
Explore

Understanding JSON in Web Applications

JSON, standing for JavaScript Object Notation, is a format for structuring data that's sent between a client (your browser) and a server.
JavaScript Object Notation is a page description language just like HTML is a page description language.
JSON is very popular because it's easy for humans to understand and also easy for computers to parse and generate.
In the context of our web app, JSON comes into play when we interact with the joke API.
We send a request to the server, and it sends us a response.
Both the request and the response are structured using JSON.

Understanding JSON

A JSON object is enclosed in curly braces {}.
A JSON document is an aggregation of KEY:VALUE pair.
keys (also known as properties) and values. Each key is followed by a colon : and the key-value pairs are separated by commas ,.
Here's an example of a JSON object:

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

You can also have arrays in JSON:
jsonCopy code
{
"employees": ["John", "Anna", "Peter"]
}

And you can have arrays of objects:
jsonCopy code
{
"employees": [
{"firstName": "John", "lastName": "Doe"},
{"firstName": "Anna", "lastName": "Smith"},
{"firstName": "Peter", "lastName": "Jones"}
]
}

Using JSON in the Random Joke Web App

In our random joke web app, when you click the "Get Joke" button, it makes an AJAX request to https://official-joke-api.appspot.com/random_joke. The server sends back a JSON response.
The response might look like this:
{
"id": 20,
"type": "general",
"setup": "Why don't scientists trust atoms?",
"punchline": "Because they make up everything!"
}

In the AJAX request, we have a success function that handles this JSON response:
success: function(data) {
$("#joke").html(data.setup + "<br>" + data.punchline);
}

In this function, data is the JSON object we received from the server.
We can access the properties of this object using dot accessor notation.
So data.setup gives us the setup of the joke, and data.punchline gives us the punchline.
We then insert these into our webpage using jQuery's .html() method. This updates the contents of the paragraph with the ID joke, displaying the new joke to the user.

Summary

JSON is a standard format for structuring data that's sent between a client and a server.
It's easy to use, both for humans and computers. In our random joke web app, we used JSON to structure the data we sent and received in our AJAX request.

Exercises

Create a JSON object representing a student, with properties for their name, age, and courses they're taking. How would you represent multiple students?
Look at the documentation for the random joke API (or another API of your choice). What data does the API send back in the JSON response?
How would you access the different properties of the response?
Try writing a JavaScript function to parse this JSON data and extract the information you need.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.