A Story of JSON

One day Mickey was going down the street where he met Minnie

Mickey – Hey Minnie!

Minnie – Hi Mickey. How are you?

Mickey – I am good, what are you doing here?

Minnie – Ummm hmm… I came to …aaaa….  Get the groceries

Mickey – You look lost, what’s the matter?

Minnie – You see Mickey, I have been reading on JSON but do not get exactly what it is. I need to explain this in tomorrow’s class in simple words and with examples

Mickey – Oh, don’t you worry. I am here now

Minnie – Do you know about JSON

Mickey – Yes, of course, do you want to hear a story

Minnie (excited) – Yes

Mickey – Let’s go to the riverside restaurant then

Minnie – Awesome, let’s go



(At the restaurant)

Minnie – Let’s Start!

Mickey – Okay! Let’s say there are different countries and each has its own local language for communication

Minnie – Okay

Mickey – Now the people within the same country can communicate easily using their own language. But it will be difficult to interact with people from other countries

Minnie – That’s True!

Mickey – So what can be a solution here

Minnie – Well! they can keep an interpreter who understands the language of both countries and can help people to communicate

Mickey -Yes, but do you think that will be practical and manageable

Minnie – hmmm…

Mickey – Imagine, every person or every group will need to go with an interpreter whenever they need to communicate. And then one interpreter may understand 2 or a few languages but not all. So again there will be overhead to keep changing interpreters for communicating with different groups

Minnie – Yes, that sounds scary. I did not think of that

Mickey – Can there be a better and simpler option

Minnie (thinking) – hmmm..

Mickey – What if they all can agree and create a simple common language (like English) that all can understand and use to communicate with each other

Minnie – That would be good, but all of them will have to learn the new language

Mickey – Yes, I will talk more about that later. For now, just imagine that it will be a simple structural language that anyone can learn easily

Minnie – Yes that will be great

Mickey – So now take the same example of programming languages

We need a way so that different computer languages or applications built over different languages and platforms can communicate with each other

Minnie – So is JSON the common language here

Mickey – Yes,

JSON stands for JavaScript Object Notation

J Java
S Script
O Object
N Notation

Minnie – I get that

Mickey – JSON is an open standard lightweight data-interchange format that uses human-readable text to store and transmit data

Minnie – Okay

Mickey – It is basically a text format that makes it easy to share data between devices such as Clients and Servers

Minnie – Why the name “JavaScript Object Notation”. Has it to do anything with JavaScript language

Mickey – JSON uses the basic idea of javascript data structure. Its origin is based on how JavaScript objects work, so in that sense, it is related. Regardless of the fact that it has its origin from JavaScript, it is widely used across many Languages

Minnie – Alright!

Mickey – Now JSON is more like a structure or format

Minnie – What do you mean by that

Mickey – hmm… You can say it is not a complete language but the basic or grammar of a language

Minnie – Oh I see!

Mickey – So learning or understanding JSON is not like learning a completely new language, as we saw in our example of English

Minnie – So JSON is not a programming language

Mickey – Yes, it is not. It is a common and open standard format in which we can present our data or message and send over to other apps

Minnie – So is XML related to JSON

Mickey – XML is another way of communication. There can be more than one common language to communicate between people of different geographies and similarly, we have 2 formats XML and JSON to communicate between different programming languages or apps

Minnie – Okay so until now I have got this

  1. JSON stands for JavaScript Object Notation
  2. JSON is a syntax or format for storing and exchanging data
  3. JSON is language independent
  4. Platforms or applications built over different languages can exchange data or information using JSON

Mickey – Yes, well done!

Minnie – Okay Got it. So we now know that applications built over different languages can exchange data using JSON. But until now we have not discussed the actual format or structure of JSON

Mickey – Yes, now it’s time to go deep

Minnie – Wow, this is getting interesting

Mickey – Before that do you want to get some coffee and cookies

Minnie – Yeah, I believe I will need them

(Mickey orders coffee and cookies for Minnie)

Mickey – Okay now you will need a pen and paper

Minnie – Here you are

Mickey – Okay, now give me a list of Dogs with their breed, color, age, etc. Can you give me the data here?

Minnie – Sure

So here you go

Buddy, German Shepherd, Black, 10
Glory, Beagle, Brown, 5
Tyson, Pug, White, 7
Lakmi Poodle, Grey, 2

Mickey – Okay that is good. Now suppose this will be a data of 100 Dogs. Do you think it will be easy to read, manage, update, and search in the way you have created?

Minnie – That will be a mess

Mickey – Okay so now let me structure this data in JSON

{
  "Dogs": [
    {
      "name": "Buddy",
      "breed": "German Shephered",
      "color": "Black",
      "age": 10
    },
    {
      "name": "Glory",
      "breed": "Beagle",
      "color": "Brown",
      "age": 5
    },
    {
      "name": "Tyson",
      "breed": "Pug",
      "color": "White",
      "age": 7
    },
    {
      "name": "Lakmi",
      "breed": "Poodle",
      "color": "Grey",
      "age": 2
    }
  ]
}

Minnie – Wow, this looks very formatted and easy to read

Is this JSON

Mickey – Yes! Exactly

Minnie – Wow

Mickey – Now, you see, it is easier to manage, update, and also to search anything both by humans and also by programming languages

Minnie – This is getting interesting. Tell me more…

Mickey – So here are some rules of JSON

  • Data is in key/value pairs
  • Data is separated by commas
  • Curly braces hold objects
  • Square brackets hold arrays

Minnie – So in the above examples we have an array of Dogs

Mickey – Yes! Right. Let’s understand more

A key/value pair consists of a field name or key (in double quotes), followed by a colon, followed by a value:

Example
“name” : “Buddy”

In JSON, keys must be strings, written with double quotes:

In JSON, values can be of type

  • a string
  • a number
  • an object (JSON object)
  • an array
  • a boolean
  • null

Minnie – Yes, now I can see that in the example

Mickey – Also you must have noticed all data is separated by a comma,

Minnie – yeah! I see that

Mickey – Now another rule says, Curly braces hold objects or we can say JSON objects are surrounded by curly braces {}

Minnie – So this is one object

{
  “name”: “Buddy”,
  “breed”: “German Shepherd”,
  “color”: “Black”,
  “age”: 10
}

Mickey – Yes! Absolutely correct. There can be nested objects i.e. objects within the object

And inside the objects

  • Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null).
  • Keys and values are separated by a colon.
  • Each key/value pair is separated by a comma.

Minnie – Yes I can see in the data

Mickey – You can also access the object values using dot(.) in programming

Example

dogObject1 = { “name” : “Buddy”, “breed” : “German Shepherd”, “color” : “Black”, “age” : 10 };

x = dogObject1.name;

OR using square brackets []

x = dogObject1[“name”];

Minnie – This is getting interesting and deep. I need more coffee

Mickey – Sure Minnie

Minnie – This is so refreshing. Let’s continue now

Mickey – Sure, Now coming to Arrays, we know Square brackets hold arrays OR we can say Arrays are surrounded by Square Brackets

Minnie – Yes I see in the Dogs array

Mickey – Okay so tell me, how can I access the 2nd dog’s detail from the Dogs array

Minnie – hmm don’t know

Mickey – Suppose  you store the complete Dogs array in a variable say myDogs

Now you can say

x = myDogs.Dogs[1]

Minnie – But we needed the 2nd dog’s data, Why have you given 1 here

Mickey – That’s because the index position starts from 0 and not 1

Minnie – Got it. So this will give us

{
“name”: “Glory”,
“breed”: “Beagle”,
“color”: “Brown”,
“age”: 5
}

Mickey – Exactly

Minnie – I am getting this

Mickey – You can also parse or search any data inside a JSON using JSON Path

Minnie – What is JSON Path

Mickey – It is the location or address or a specific value or data in a JSON

You can create a JSON Path manually or use tools like JSON PathFinder – http://jsonpathfinder.com/

Minnie – Great!

Mickey – There is also a Chrome extension by the same name – JsonPath Finder

Minnie – I see!

Mickey – Okay, let’s do an activity

Minnie – Sure Mickey. I am excited!

Mickey – just copy the Dogs JSON and put it in here  http://jsonpathfinder.com/

Then try to get JSON Path for the name of 3rd dog

Minnie – Okay

Mickey – On the right side expand the arrow to see your formatted data and then click on the value you want and JSON path will be displayed in the Path filed above

Minnie – Okay

Mickey – What did you get

Minnie – This

x.Dogs[2].name

Mickey – yes, so this is the JSON path to the name of 3rd dog object

Minnie – Great! This is interesting

Mickey – So you will find a lot of tools online for beautifying JSON, validating JSON and generating JSON path

Minnie – Wow!

Mickey – Also remember

  • The file type or file extension for JSON files is “.json”
  • The Media type for JSON text is “application/json”

Minnie – What is Media type

Mickey – Media type or MIME-type is a label used to identify a type of data

It is used so the software can know how to handle the data.

So when you send data, you also send its media type so that the server will know what type of data you are sending and can parse it accordingly

Minnie – Okay got it, that is why in HTML requests and API request I see this header content-type

Mickey – Exactly, that is to provide the type of data like “application/json” if the data is in JSON

Minnie – Many things getting clear here

Mickey – Happy to know that

Minnie – So, that means every programming language or application will have some function to parse a JSON data

Mickey – Minnie you are asking all right questions today. Exactly, you will find a function JSON.parse() in all languages that can communicate with JSON format

Minnie – I am got so much information today

Mickey – Remember JSON is like One universal language for communication between programming languages and applications

Minnie – Yes I will

Mickey – Should I drop you home now

Minnie  – No, let’s order some more coffee and cake and enjoy the sunset

Mickey – How much coffee will you have today?

Minnie – Thanks for all this. I will never forget.

Mickey – I am always here for you 🙂

about the author more stories

101