The Notation that web devs must know

JSON - JavaScript Object Notation

Introduction

JSON, JavaScript Object Notation, a light weight format for storing and retrieving data from across the internet and is most often used in retrieving data from a 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:

{
    "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 object are the same a JavaScript objects, however, that would be incorrect. While they do share similarities, there are also differences.

We can say that a JSON object is very similar JavaScript object. The exception is that the keys for a JSON object must be a string that is enclosed with quotation marks.

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:

{
    "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 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:

{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[e-mail]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[e-mail]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[e-mail]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[e-mail]",
            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 this following after calling an API:

`
{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[e-mail]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[e-mail]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[e-mail]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[e-mail]",
            userName:"Julia__Apple"
        },
    ]
}`

Having the data represented as a string is still useable by JavaScript but to get any usefull information we would need to use string manipulation to retrieve the information. That takes way to 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 look something like this:

const res = `{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[e-mail]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[e-mail]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[e-mail]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[e-mail]",
            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:

const sendObj = JSON.stringify(resJSObj);

Now that it is in a string we can send it to an API.

Turning your JSON data into a string can also be used for storage purposes. You can save data retrieved from an API in local/session storage. Not advisable but say you wanted to store your users information in local/session storage to keep track of authentication state or user preferences -- you would get the data back from the API, convert it into a string and then store it in local/session storage.

---

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?