Introduction

JSON, JavaScript Object Notation, is a lightweight format for storing and retrieving data from across the internet and is most often used in retrieving data from an API. Today, we will take a look at how we can create, and read JSON data we want to send or retrieve from an API.

Getting Started

How do we write JSON?

JSON can either be represented as an array or an object. The following is an example of a JSON object:

JSON
{
    "f_Name":"john",
    "l_Name":"Doe",
    "age":24,
    "school":"UofT"
}

This above JSON object defines an object that has four properties:

1. First name
2. Last Name
3. Age
4. Name of the school

One can make the argument that JSON objects are the same as JavaScript objects, however, that is not entirely true. While they do share similarities, there are major differences between the two objects. The keys for JSON objects are always represented by a string and thus the keys are enclosed by quotation marks. Looking at the example above, we can see that all the keys follow this structure.

You may also notice something more interesting -- for the delimiter, we are using an underscore instead of a hyphen or a space. This is done purposefully as in order to use a JSON object within JavaScript, the object itself must be serializable. This means that the keys in a JSON object must be representative of a valid JavaScript variable thus no hyphens or spaces are allowed.

Creating a JSON file

We create a JSON file by adding the .json file extension to the end of our file name.

At the core anything we put inside of this JSON file, be it a string, number, boolean, etc. is valid JSON, however, we wouldn't want to create an entire file to just store one piece of data. We would more likely want to store several data entries in our JSON file and We can do this in one of two ways:

1. Create an array that stores multiple entries
2. Create an object

Shape of the JSON

Occasionally you will hear terms like "I need to get the shape of the JSON". This refers to how the actual JSON file is structured/organized. We making an API call, you will almost always see a data object where the value for that key is dependent on how the API was designed.

Most often you will see JSON data in the form of an object that has one key-value pair -- the key being Data and the value being an array of objects. Looks like this:

JSON
{
    "data":[
        {
            "Name":"bob",
            "Age":34,
        },
        {
            "Name":"Smith",
            "Age":32,
        },
        {
            "Name":"Jane",
            "Age":14,
        },
        {
            "Name":"Julia",
            "Age":24,
        },
    ]
}

The value of data is represented by an array of objects where each object is essentially a person that has a name and age property. Storing data like this allows us to store multiple instances of a single object.

You can think of having it on your website, if you wanted to display all the user names for all the users on your website, most likely the API would return a structure like the one above, where each object in the array would be a specific user. This object may have properties like userName, email, Full Name, etc. This userObject returned from the API may look like this:

JSON
{
    "userData":[
        {
            "fullName":"Bob Ross",
            "email":"bob@email.com",
            "userName":"bob21"
        },
        {
            "fullName":"Jane Doe",
            "email":"Jane@email.com",
            "userName":"JaneDoe11"
        },
        {
            "fullName":"Stephanie",
            "email":"Stephanie@email.com",
            "userName":"Stephanie--OK"
        },
        {
            "fullName":"Julia",
            "email":"Julia@email.com",
            "userName":"Julia__Apple",
        },
    ]
}

JSON Methods

Retrieving Data

A common use for JSON is to send/retrieve data from a web API and sometimes the JSON data is sent in the form of a string. Using the user example above, you may see the following after calling an API:

JS
`
{
    "userData":[
        {
            "fullName":"Bob Ross",
            "email":"bob@email.com",
            "userName":"bob21"
        },
        {
            "fullName":"Jane Doe",
            "email":"Jane@email.com",
            "userName":"JaneDoe11"
        },
        {
            "fullName":"Stephanie",
            "email":"Stephanie@email.com",
            "userName":"Stephanie--OK"
        },
        {
            "fullName":"Julia",
            "email":"Julia@email.com",
            "userName":"Julia__Apple",
        },
    ]
}`

Having the data represented as a string is still useable by JavaScript but to get any useful information we would need to use string manipulation to retrieve the information. That takes way too long and we don't want to do that! Since we know that this is an object, we can call a parse method on the data to convert it into a JavaScript object.

It looks something like this:

JS

const res = `{
    "userData":[
        {
            "fullName":"Bob Ross",
            "email":"bob@email.com",
            "userName":"bob21"
        },
        {
            "fullName":"Jane Doe",
            "email":"Jane@email.com",
            "userName":"JaneDoe11"
        },
        {
            "fullName":"Stephanie",
            "email":"Stephanie@email.com",
            "userName":"Stephanie--OK"
        },
        {
            "fullName":"Julia",
            "email":"Julia@email.com",
            "userName":"Julia__Apple",
        },
    ]
}`;

const resJSObj = JSON.parse(res);

Here we are storing the javascript object inside of the variable resJSObj which we can then use to do want ever we want.

Sending data to API

When we want to send data to an API, we must first convert it into a string. This can be done by calling the .stringify() method and then passing in our object. Look something like this:

js
const sendObj = JSON.stringify(resJSObj);

Now that our object is "stringified", we can send it to an API.

Question for you

Now that this is complete we have a way to use the JSON format to send/retrieve information from an API. Now knowing this, here's a question for you -- how else can you implement the JSON?