What Is JSON And How JSON used In JavaScript With Example

admin_img Posted By Bajarangi soft , Posted On 07-10-2020

In Java script we can use JSON ,JSON means JavaScript Object Notation,JSON is a syntax for storing and exchanging data and JSON is text, written with JavaScript object notation.

What Is JSON And How JSON used In JavaScript With Example

Exchanging Data

When exchanging data between a browser and a server, the data can only be text.

JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server.

We can also convert any JSON received from the server into JavaScript objects.

This way we can work with the data as JavaScript objects, with no complicated parsing and translations.
 

Sending Data

If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server

var myObj = { Company_name: "Bajarangisoft", since: 2, city: "Banglore" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

 

Receiving Data

If you receive data in JSON format, you can convert it into a JavaScript object

var myJSON1 = '{"Company_name":"bajarangisoft", "since":2, "city":"Banglore"}';
var myObj1 = JSON.parse(myJSON1);
document.getElementById("demo1").innerHTML = myObj1.Company_name;
var myObj, myJSON, text, obj;


 

Storing Data

When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.

JSON makes it possible to store JavaScript objects as text.

// Storing data:
myObj = { Company_name: "Bajarangisoft", since: 2, city: "Banglore" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo1").innerHTML = obj.Company_name;

 

What is JSON?

  • JSON stands for JavaScript Object Notation

  • JSON is a lightweight data-interchange format

  • JSON is "self-describing" and easy to understand

  • JSON is language independent *

JSON uses JavaScript syntax, but the JSON format is text only.
Text can be read and used as a data format by any programming language.

 

Why use JSON?

Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language.

JavaScript has a built in function to convert a string, written in JSON format, into native JavaScript objects:

JSON.parse()

So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.

Complete Code For JSON In JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>What Is JSON And How JSON used In JavaScript With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">What Is JSON And How JSON used In JavaScript With Example</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="well">
            <h2 id="demo1"></h2>
        </div>
    </div>
    <div class="col-md-2"></div>
    <script>
        // Storing data:
        myObj = { Company_name: "Bajarangisoft", since: 2, city: "Banglore" };
        myJSON = JSON.stringify(myObj);
        localStorage.setItem("testJSON", myJSON);

        // Retrieving data:
        text = localStorage.getItem("testJSON");
        obj = JSON.parse(text);
        document.getElementById("demo1").innerHTML = obj.Company_name;
    </script>
</div>
</body>
</html>

Related Post