JavaScript Object Notation (JSON) | Let’s Simplify

If you are a beginner in web technology or Android development, chances are you heard about JSON a lot. JSON stands for JavaScript Object Notation. In a nutshell, it is a simple and lightweight format for storing and transporting data over the internet. In this article, we will explain how data is stored and retrieved from a JSON file and why it is so popular today.

How do JSON files store data?

To understand that, you will need to wrap your head around the concept of key-value pairs. What are key-value pairs? Consider this example:

"catName" : "Oscar"

Here, “catName” is the key and it stores the value “Oscar”.

A key can also store an array of data in this way:

"catNames" : ["Misty", "Oscar", "Charlie"]

JSON stores data in key-value pairs. The only rule is, all the key-value pairs need to be enclosed inside curly brackets. Consider this example:

  “blogName” : “GeekyMinds”,
  “yearCreated” : 2018,
  “authors” : [
    {“firstName”: “Adrita”, lastName: "Roy" },
    {“firstName”: “Aritra”, lastName: "Mukherjee" },
    {“firstName”: “Aditya”, lastName: "Bhadra" }

Just to be clear, a JSON file contains data in plain text. This is why JSON is so easy to transmit over the internet. JSON files have the file extension “.json” and they can be used as data storage format by any programming language.

So what does it have to do with JavaScript?

The JavaScript Object Notation format of representing data is almost identical to JavaScript Objects. In other words, JSON follows the notation used by JavaScript Objects. The only difference is that JSON names require double quotes. JavaScript names don’t.

How can we retrieve data from a JSON file?

In JavaScript, we have a method called JSON.parse() which converts JSON text to JavaScript objects. Consider we received data pertaining to cat names from a web server in JSON format. Remember we will receive it as a string since it is plain text.

' { "name" : "Misty", "speaks" : "meow", "favTreat" : "milk" } ' //notice the single quotes

In JavaScript, we can use JSON.parse() to convert this data into a JavaScript object and access the information:

var cat = JSON.parse(' { "name" : "Misty", "speaks" : "meow", "favTreat" : "milk" } ');; //returns "Misty"
cat.speaks; //returns "meow"

We can also convert JavaScript objects into JSON by using the JSON.stringify() method.

var doggo = {name: "Rover", likes: "treats", speaks: "bark"};

var doggoJSON = JSON.stringify(doggo); //returns a string of doggo in JSON format

Why use JSON?

Suppose you are running a dynamic application on a device, it sends a request to fetch data from the server. The server may send the data in the form of XML, which stores the data using tags, which can be tedious to parse in case of complex data.

This is why we use JSON which is a language-independent syntax where the data is sent in an object format, which is not only parsed faster than XML but can be parsed by a standard JavaScript function into a ready-to-use JavaScript object.

If you want to learn more about JSON, then visit this MDN resource.