JSON Editor

Knowledge Base

Back to All Topics

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 serve

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.

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.

Rules that apply when working with JSON:

  1. Data is in name/ value pairs.
  2. Data is separated by commas.
  3. Curly braces hold the objects.
  4. Square brackets holds array of JSON objects.

When needed you can use JavaScript built in function JSON.parse() to convert from JSON object to string. So when you need to exchange data between browser and server, you can only use text for data so that is were we can convert any JavaScript object into a JSON, and then send it to the server and do the same to go from JSON to JavaScript object. 

JSON Example:

{
"students":[
      {"firstName":"John","lastName":"Frank"},
      {"firstName":"Bob","lastName":"Jones"},
      {"firstName":"Bill","lastName":"Doe"}
]
}

Converting a JSON Text to a JavaScript Object:

A common use of JSON is to read data from a web server, and display the data in a web page.

For simplicity, this can be demonstrated using a string as input.

First, create a JavaScript string containing JSON syntax:

var text ='{ "students" : ['+
'{ "firstName":"John" , "lastName":"Frank" },'+
'{ "firstName":"Bob" , "lastName":"Jones" },'+
'{ "firstName":"Bill" , "lastName":"Doe" }]}';

Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object:

var obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

<script>
document.getElementById("demo").innerHTML=
obj.students[1].firstName + " " + obj.students[1].lastName;
</script>