What is JSON? Know how it Works with Examples

Extensible Markup Language (XML) was considered to be the only choice for open data interchange. However, developments in open data sharing have produced more options for Web Development). So, let’s get into the depth of What is JSON and how is it different from JavaScript.

What is JSON?

JavaScript Object Notation (JSON) is a way of storing information in an organized and easy manner. The data must be in the form of a text when exchanging between a browser and a server. You can convert any JavaScript object into JSON and send JSON to the server.

You can also convert any JSON received from the server into JavaScript objects. It helps in working with the data as JavaScript objects, with no complicated parsing and translations.

Now that you know what is JSON, let’s move ahead and see why do we need to use it and what are the different advantages of using JSON.

Why do we use JSON?

JSON is lightweight and easy-to-use when compared to other open data interchange options. However, that’s not the only reason you should use it for your API integration. It is preferred over other options because of the following advantages:

Less Verbose – It has a more compact style as compared to XML. This makes it more readable. The lightweight approach of JSON can make significant improvements while working with complex systems.

Faster – The XML software parsing process is slower than JSON. This is because the DOM manipulation libraries require more memory to handle large XML files. JSON , on the other hand, uses fewer data which reduces the cost and increases the parsing speed.

Readable – The structure of JSON is straightforward and easily readable. You have an easier time mapping to domain objects irrespective of the programming language you’re working with.

Structured Data – JSON uses a map data structure whereas XML has a tree structure. The key or value pairs can limit your task, but you get a predictable and easy-to-understand data model.

JSON vs XML

Both  XML and JSON are widely used today. They are  used as  data interchange formats and both have been adopted by applications as a way to store structured data. Let’s have a look at the differences between the two:

JSON Example- 

{"employees":[
{"name":"Lisa", "email":"lisa101@xyz.com"},
{"name":"Neil", "email":"neilps@xyz.com"},
{"name":"Jai", "email":"jai87@xyz.com"}
]}

XML Example-

<employees>
<employee>
<name>Lisa</name>
<email>lisa101@xyz.com</email>
</employee>
<employee>
<name>Neil</name>
<email>neilps@xyz.com</email>
</employee>
<employee>
<name>Jai</name>
<email>jai87@xyz.com</email>
</employee>
</employees>

Syntax Rules

The JSON syntax is a subset of the JavaScript syntax. The syntax is derived from JavaScript object notation syntax and consist of the following rules:

• Data is written in name or value pairs.
• Data is separated by commas.
• Curly braces hold the objects.
• Square brackets hold the arrays.

The JSON format is very similar to JavaScript objects. Here, keys must be strings, written with double quotes such as:

{ "name":"Susan" }

JSON Fundamentals

In  JSON , values must be one of the following data types:

• String
• Number
• Object (JSON object)
• Arrays
• Boolean
• Null

String

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

{ "name":"Mary" }

In JavaScript , keys can be strings, numbers, or identifier names:

{ name:"Mary" }

Objects

JSON objects are surrounded by curly braces {}. They are written in key or value pairs in the following way:

{ "name":"Lisa", "age":23, "car":BMW }

Arrays

Arrays in JSON are almost the same as arrays in JavaScript. In JSON, array values are of type string, number, object, array, boolean or null. Whereas, in JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.

Arrays in JSON can be values of an object property. It is defined as:

{
"name":"Lisa",
"age":23,
"cars":["Ford", "BMW", "Fiat"]
}

Convert JSON Object to JavaSCript Text

JSON is commonly used to read data from a web server and display the data on a web page. This can also be demonstrated using a string as input.

Let’s take an example and have a look at how JSON object can be converted into Javascript text using the function JSON.parse():

<html> 
<body> 
  
<h2>Converting JSON Text into Javascript Object</h2> 
<b>JSON Object :</b> 
<p id="example"></p> 
<b>Use of Javascript object :</b> 
<p id="example1"></p> 
  
<script> 
var jsonobj ='{ "name":"Josh Huan","employeeID":"1107","age":25 }'; 
  
// Here we convert JSON to object 
var obj = JSON.parse(jsonobj); 
  
document.getElementById("example1").innerHTML = obj.name + ", with employee id " + obj.employeeID + ", and age " + obj.age; 
document.getElementById("example").innerHTML =jsonobj; 
</script> 
</body> 
</html>

It will convert the objects into texts and give the following Output :

With this, we have come to the end of our article. I hope you understood what is JSON and why do we need to use this.

Got a question for us? Please mention it in the comments section of “What is JSON?” and we will get back to you.