What is JSON? How it works? | Explained

The JSON data is mainly used to represent the key-value pairs and array data types. It is a very light-weight data format that is used for transmits, store data for web programming. In a nutshell, JSON provides a way to represent logical data in a human-readable format which is easy to parse for computers.

It is a very commonly used format for various web services with regards to client server communication.

It is extremely light weight to send back and forth data between client and server, due to a small file size. It is easy to read compared to XML and definitely much cleaner than XML. Therefore, JSON is a better alternative to XML.

If you are using XML for your project, pretty soon, it would be out-dated. Most of the current ongoing projects are using JSON instead of XML.

In XML, you have to worry about too many starting and ending tag. JSON is pretty clean from that perspective.

Now, let us understand why we should use JSON.

Salient Features of JSON

Lightweight format for exchanging data
Language-independent data format
Simpler and easy to read and write
Easy to use and performance
JSON library is open source and free to use

Why JSON?

As we have discussed earlier, the full form of JSON is JavaScript Object Notation. From its full name, some people have a misconception that the JSON is only applicable for JavaScript. However, this is not true.

JSON is language independent data representation format. Several popular languages support and provides library to parse JSON data.

Now, let us understand the background of JSON and how it came into picture after all.

In the initial days of web development (late 90’s or early 2000s), we used to develop the web application primarily based on HTML. In fact, there were not many choices other than HTML for web application. Gradually, we started using CSS and JavaScript for web application.

Back in those days, we were mainly dealing with static pages in most of the web application. But, today, most of the website has to display more and more dynamic content.

“Dynamic content” simply means that the data that you see on your web browser is completely customized for your query. For example, if you are searching for a smartphone under 500 dollars, the website will show only those smartphones which are available in the store at that moment and are under 500 dollar. The criteria might be different for your friends.

So, definitely the web application for an e-Commerce platform has to display the dynamic content as per user’s needs.

What is JSON; Client Server Communication

As you can see in the above image, the user sends a request to the server for information. The server then receives and processes the user’s request and sends the desired data back to the client. The client will then be able to see the responses on his browser.

In earlier days, the server used to send the complete dynamic content along with the HTML design. But, the client machine is already having the design; all it needs is dynamic data.

Now, how can you send the dynamic data from server to client? Can you send the data in plain text format from server to client?

Theoretically, you could send simple data from the server to the client. But, for complex data, it would be really difficult to parse for the client machine. The parser would not know how to parse the incoming data.

The solution here is sending the data from the server to the client in the form of JSON data. The client then can easily parse the JSON data and display the dynamic content to the user.

JSON Syntax

The syntax for JSON data is very simple. It is generally represented in the form of key-value pair.

It is very similar to Dictionary, Hashing in other programming languages.

Here is how a JSON data structure looks like:

{
“Key-1” :  Value-1,
“Key-2” :  Value-2,
“Key-3” :  Value-3,
}

The curly braces indicate that this is a JSON object. The square brackets represent an array in JSON.

The primary elements for JSON data is Key and value. The key is represented as a string enclosed in quotation marks. The value can be a String, Number, Boolean, array, or any other object.

JSON Tokens and Literals

There are six structural valid tokens available in JSON:

Left Curly Braces i.e. {
Right Curly Braces i.e. }
Left Square Bracket i.e. [
Right Square Bracket i.e. ]
Comma i.e. ,
Colon i.e. :

Here are the literals that are valid in JSON:

true
false
null

Types of values in JSON

JSON allows the following values in JSON data:

JSON Data Type	Description
Number	Number represents integer, floating-point
String	String consists of plain text characters
Array	Ordered values separated by commas
Object	Consists of key-value pairs, similar like dictionary or hash table
true	Boolean value for True sense
false	Boolean value for False sense
null	null indicates empty value

JSON – Array

A JSON arrays are represented inside square brackets. An array can contain any valid values (as shown above) separated by comma.

Here is an example of array in JSON:

[“C”, “C++”, “JavaScript”]

JSON – Object

The JSON object is defined inside the curly braces. An object structure is similar to a dictionary or hash table. The object structure is represented in the key-value pair.

Here is an example of JSON object:

{
“name”: “Peter”,
“age”:  30
}

JSON Example

Here’s a JSON example:

{
“firstName”: “Louis”,
“lastName”: “Martin”,
“studentFullName”:  “Louis Martin”,
“rollNumber”: 18,
“subjects”: [“Math”, “Chem”, “Phy”]
}

We already know, a JSON object is represented by curly braces. In the above JSON example, we are representing a JSON object. The object includes firstName, lastName, studentFullName, rollNumber, and subjects.

An object can have an array or nested array. Sometimes, the real-world JSON objects contain various levels of nested array and objects.

JSON files

JSON objects can be stored in a file. The common file extension for JSON data file is *.json. The data can be stored in a plain text file.

Applications of JSON

Here are the main applications of JSON data:

Primarily JSON is helpful in transferring data from server to client
Allows to perform asynchronous data transfer
RESTful APIs use JSON data to get the data
Heavily used for JavaScript-based web application
Modern programming languages support JSON data and provide libraries to parse JSON data

JSON VS XML

The XML equivalent code for JSON data would really look heavy. Therefore, more and more webservices are using JSON instead of XML.

XML	JSON
XML files are difficult to comprehend for humans.	JSON files are comparatively more easy for humans to understand.
All XML data must be string.	There are various JSON types – Number, String, Array, Object, true, false, null
Parsing XML data and retrieving data is difficult for XML data.	Parsing JSON data is easy in most of the modern languages.

JSON Utilities

There are several online utilities available for JSON data.

JSON Viewer: JSON Viewer Chrome Extension. You can add this JSON viewer extension in your Chrome browser and view the JSON data. There is also another popular website for JSON viewer – stack.hu
JSON Formatter: You can find several online JSON formatted tool. Here is one of the popular ones – JSONLint.com. It will also validate your JSON code.
JSON Beautifier: Here is another useful tool for beautifying the JSON data – PrettyDiff.com. You can use this website for syntax highlighting for the JSON code.

Conclusion

In this article I have tried to these questions – What is JSON and How it works and various other aspects of this topic.

In the next article, I will cover other aspects of JSON data. For example, how to validate JSON data, how to format JSON data etc.

Is there anything you’d like to add or clarify? Let me know in the comments!

What is JSON? How it works? | Explained

Admin

This post was published by Admin.

Email: admin@TheCloudStrap.Com