Post
Ask Question

JSON With JavaScript

What is JSON?

JSON stands for JavaScript Object Notation. It's a lightweight data interchange format. It is a syntax for storing and exchanging data. It’s text written with javascript object notation. In this article, we will see some basics of JSON with JavaScript.

History of JSON

JSON is a human-readable text to transmit data object consisting of attribute-value pairs and array data types (or another serializable value). It is considered as a replacement for XML and AJAX-style system. It’s a language independent format and it’s derived from JavaScript and also include many languages to generate parsed JSON. Any JSON file saved with an extension of .json is used to transfer data between server and web application.

In the year 2000 Douglas Crock Ford originally specified the JSON Format. At that time, two competing standards, RFC 8529 and ECMA-404, were the ECMA's only defined allowed syntax and RFC covers some security and interoperability consideration.

Advantages of JSON

Here are some of the advantages of JSON:

  • It’s easy for a human to read and it’s  lightweight.
  • It’s language independent.
  • It’s can be easy to store application data and similar with XML.
  • It’s faster and it’s very easy to use.
  • It has a wide range of support browser compatibility with the operating system.
  • It’s the best tool for sharing data.

But there is no error handling in JSON.

JSON vs XML

JSON is easy to read,

  • It is data-oriented
  • It’s doesn’t provide display capabilities.
  • Its supports array
  • It supports only text and numbers

XML

  • XML’s less easy to learn.
  • It is document-oriented.
  • It provides data to display because it’s a markup language.
  • It doesn’t support array.
  • It supports text, numbers, images, and graphs.

Important terms in JSON:

Key

Key in JSON is defined as always a string enclosed in a quotation mark

Value

 A value can be a string, number or Boolean.

JSON object

 An object is a real-world entity and it’s an instance of the class. It contains name and value separated by colons and is enclosed by curly braces. Each pair is separated by a comma. 

Syntax for object

  1. {“  
  2.     name1”: ”value1”  
  3. } 

 

An object can be a collection of objects

  1. {“  
  2.     name1”: ”value1”,  
  3.     “name2”: {“  
  4.         name3”: ”value2”,  
  5.     }  
  6. }  
  7. For example,  
  8. obj = {“  
  9.     name”: ”navi”,  
  10.     “age”: 24,  
  11.     “Phoneno”: {“  
  12.         1234567890”,  
  13.         ”0987654321”  
  14.     }  
  15. } 

JSON Array

In JSON array is enclosed by square brackets and separated by commas. An array index starts from 0 and also an associative array of values. The array may be a string, number or even can be a Boolean. The syntax for JSON array is given below

[value,value,value,value]

JSON object and arrays can be nested.

For example,

[“Chennai”,”Mumbai”,”Delhi”]

JSON Parse

The main application of the JSON is used to exchange the data between the web application and the server

For example,

In this example, we use JSON with JavaScript

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <body>  
  5.     <h2>JSON PARSE</h2>  
  6.     <p id="sample"></p>  
  7.     <script>  
  8.         var testobj = JSON.parse('{ "name":"Naveen", "age":24, "city":"Mumbai"}');  
  9.         document.getElementById("sample").innerHTML = testobj.age;  
  10.     </script>  
  11. </body>  
  12.   
  13. </html> 

 

The output of the code is shown below,

Output

Conclusion

In this article, we saw some basics about JSON.  In my next article, we will see some advanced topics in JSON. I hope this article will be useful for you.


Similar Articles