JavaScript JSON

JSON

JSON or JavaScript Object Notation is a popular text format. JSON is language independent, lightweight and can be used to exchange and store data. JSON syntax is both human and machine readable. JSON was built in 2001, but JavaScript started supporting JSON in ECMAScript 5 (2009). File extension for JSON file is .json.

JavaScript supports JSON since ECMAScript 5 (2009). JSON has replaced XML in web applications. XML (Extensible Markup Language) was a popular text format for data storage and exchange, but JSON has largely replaced it in web apps due to being lightweight and easier to parse.

Difference between JSON and XML

JSON Array

'[
    {"name":"abc", "age":21, "isAlive":true},
    {"name":"pqr", "age":22, "isAlive":true},
    {"name":"xyz", "age":20, "isAlive":true}
]';

JSON Object

    '{"name":"abc","age":21,"isAlive":true}';
    

JSON Applications

1. Rest API
2. NoSQL

JSON in JavaScript

JSON Object was introduced in JavaScript in ECMAScript 5 (2009). In JavaScript, JSON is string representation of JavaScript Object. Keys must be quoted in JSON and values can be a string, number,boolean, null, object or array. But functions cannot be used in JSON.

<script>
    let user='{"name":"john","age":"22"}';                                                       
</script>                              

<script>
    let user='{"name":"john","age":22}';                                                       
</script>                              

<script>
    let user='{"name":"john","age":22, "isAlive":true}';                                                       
</script>                              

<script>
    let user='{"name":"john","age":22, "id":null}';                                                       
</script>                              

<script>
    let user='{"name":"john","dad":{"name":"Mac","age":55}}';                                                       
</script>                              

<script>
    var user='{"name":"john","hobbies":["cricket","football"]}';                                                       
</script>                              

JSON Object

ECMA5 introduced the global JSON Object in javascript. The JSON Object can have two methods, parse and stringify to convert JSON String to object and object to string.

    let j=JSON;
    console.log(j);        // return object
    

JSON Methods

• JSON Parse
• JSON Stringify

Do remember to parse correct JSOn String to avoid parsing error.

JSON Parse

JSON Parse method is used to convert a JSON string to a JavaScript object. The JSON object is used to convert a string to an object using the parse() method.

<script>
    let user1='{"name":"john","age":"22"}'; 
    let user2=JSON.parse(user1);
    
    typeof user1                 // returns string            
    user2 instanceOf(Object)     // returns object         
</script>                              

JSON Stringify

JSON Stringify method is used to convert a JavaScript object to a JSON string. The JSON object is followed by the stringify() method.

<script>
    let user1={"name":"john","age":"22"};     // object
    let user2=JSON.stringify(user1);          // string
                               
</script>                              

Summary

JSON (JavaScript Object Notation) is the standard format for data exchange in web development. Key points include:

• Syntax: Lightweight, human-readable format supporting strings, numbers, booleans, null, objects, and arrays.
• JSON.parse(): Converts JSON strings to JavaScript objects for data manipulation.
• JSON.stringify(): Converts JavaScript objects to JSON strings for storage or transmission.
• Applications: Essential for APIs, configuration files, and client-server communication.
• Limitations: No support for undefined values, functions, or circular references.

Mastering JSON parsing and stringifying is crucial for handling data in modern JavaScript applications, especially when working with REST APIs and NoSQL databases.