What is JSON?

JSON stands for JavaScript Object Notation and is a data format used for storing and exchanging data. JSON is a text or String datatype, which makes it perfect for use in web browsers where data can be stored as Cookies, Session data or in a browsers built-in storage API’s such as localStorage or IndexDB. There are other uses and more technologies that use or can use JSON than I have listed here. These are just a few of the common uses with web development to get started.

JSON Syntax:

{
     “key1” : “value_1”,
     “key2” : “value_2”,
     “key3” : “value_3”
}

We can see in the above code snippet that the data is structured in key/value pairs, which is very similar to the way a JavaScript Object is structured.

JavaScript Object Syntax:

let obj = {
     key1 : “value_1”,
     key2 : “value_2”,
     key3 : “value_3”
}

Take notice of how the “keys” differ in each of the two objects. The keys need to be of the appropriate text type which is why we make sure that we place double quotations (" ") around each key and String data type value.

JSON data can be made up of String, Number, Boolean, Null also Array and Object data types. Functions, Dates and undefined on the other hand are not built into JSON, like they are in JavaScript.

JSON Data Types:

{
     “name” : “Thomas”,
     “age” : 32,
     “over25” : true,
     “children” : [“Anna”, “Paul”],
     “hobbies” : null
}

While similar in many respects don’t forget that JSON is NOT JavaScript!!!

Let's repeat that ...

JSON - IS NOT!!! - JavaScript

OK ok Got It, NOT JavaScript ... So, what do we use it for?

Most common use in web development for JSON is transmitting data and storage of simple data in a web browser. Often in web development we make a request for data from an API (Application Programming Interface), that request for information as well as the data that comes back will be in JSON format. JSON is often used to send data from an applications backend logic to the frontend view that the user sees and interacts with.

Another common use for JSON in web development is storing data on a user’s web browser. Keeping track of data such as a user’s shopping cart for an e-commerce site, or authentication information about the current user logged into their website.

Doing operations like this we then need the ability to convert the transmitted data to a useable form for our application. Most programming languages have the functionality to convert JSON data to their respective language built-in.

Let’s take a look how we do this with JavaScript.

Transforming data:

• JSON.parse( )
• JSON.stringify( )

Because we use JSON as a data exchange format we want the data being received by our web based application/server to be converted or PARSED to a JavaScript Object for us to use in the rest of our application before sending any data back to the end User (Browser Window) in string format. So, we need methods to allow us to take this JSON data and convert it into whatever programming language we are coding in. Because of this ability, applications written in a variety of different programming languages or frameworks can easily send or share data between them.

Convert a JSON object to a JavaScript Object using JSON.parse( )

// Convert a JSON Object to a JavaScript Object
$> let jsData = JSON.parse(JSONdata);
// jsData  { key1: value_1, 
//            key2: value_2,
//            key3: value_3,
//             … }

Once the JSON data object is parsed into a JavaScript object, we can use this new data to within our application as desired. Be that saving to a database, updating data on the web page or view.

Convert a JavaScript Object to a JSON object using JSON.stringify( )

// Convert a JavaScript Object to a JSON String Object
$> let jsonData = JSON.stringify(jsData);
// jsonData  “{ 
//                “key1”: “value_1”, 
//                “key2”: “value_2”,
//                “key3”: “value_3”
//              }”

Once the JavaScript object is parsed into a JSON String Object, we can use this converted data to send to another computer (such as a call to an API) or send the data on the web server to a connected frontend (like React, Angular, Vue etc.).

Let's do a quick recap:

JSON …

• Is used to send data between computers
• Is a lightweight data exchange format
• allows Data storage in the web browser
• makes it possible to store JavaScript objects as text
• Is language independent
• Can be transformed using JSON.parse( ) and JSON.stringify( ) methods in JavaScript

Hopefully this article on JSON and how we can use it with JavaScript was useful to you. Thanks for reading, until next time!