How JSON Objects Works In Java Script With Examples

Posted By Bajarangi soft , Posted On 08-10-2020

In Java Script we can access modify or delete the json objects so today we see how to works with json data

How JSON Stringify Will Remove Functions From An Object

Object Syntax

{"name":"John", "age":30, "car":null}

JSON objects are surrounded by curly braces {}.

JSON objects are written in key/value pairs.

Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null).

Keys and values are separated by a colon.

Each key/value pair is separated by a comma.

Accessing Object Values

You can access the object values by using dot (.) notation:

Example(1)

myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;

You can also access the object values by using bracket ([]) notation:

myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];

Looping an Object

You can loop through object properties by using the for-in loop:

myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x;
}

In a for-in loop, use the bracket notation to access the property values:

myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x];
}

Nested JSON Objects

Values in a JSON object can be another JSON object.

myObj = {
  "name":"John",
  "age":30,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  }
 }

You can access nested JSON objects by using the dot notation or bracket notation:

x = myObj.cars.car2;
// or:
x = myObj.cars["car2"];

Modify Values

You can use the dot notation to modify any value in a JSON object:

myObj.cars.car2 = "Mercedes";

You can also use the bracket notation to modify a value in a JSON object:

myObj.cars["car2"] = "Mercedes";

Delete Object Properties

Use the delete keyword to delete properties from a JSON object:

delete myObj.cars.car2;

Complete Code For JSON Objects Works In Java Script With Examples

<!DOCTYPE html>
<html>
<head>
    <title>How JSON Objects Works In Java Script With Examples</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">How JSON Objects Works In Java Script With Examples</h1>
    </div>
    <br>
    <div class="well">
        <h2 id="demo1"></h2>
        <h2 id="demo2"></h2>
        <h2 id="demo3"></h2>
        <h2 id="demo4"></h2>
        <h2 id="demo5"></h2>
        <h2 id="demo6"></h2>
    </div>

    <script>
        var myObj, x;
        myObj = {"name":"John", "age":30, "car":null};
        for (x in myObj) {
            document.getElementById("demo1").innerHTML += myObj[x] + "<br>";
        }

        myObj2 = { "name":"John", "age":30, "car":null };
        for (x in myObj2) {
            document.getElementById("demo2").innerHTML += myObj2[x];
        }

        var myObj3 = {
            "name":"John",
            "age":30,
            "cars": {
                "car1":"Ford",
                "car2":"BMW",
                "car3":"Fiat"
            }
        }
        document.getElementById("demo3").innerHTML += myObj3.cars.car2 + "<br>";
        //or:
        document.getElementById("demo4").innerHTML += myObj3.cars["car2"];

        var myObj4, i, x4 = "";
        myObj4 = {
            "name":"John",
            "age":30,
            "cars": {
                "car1":"Ford",
                "car2":"BMW",
                "car3":"Fiat"
            }
        }
        myObj4.cars.car2 = "Mercedes";

        for (i in myObj4.cars) {
            x4 += myObj4.cars[i] + "<br>";
        }

        document.getElementById("demo5").innerHTML = x;

        var myObj5, i5, x5 = "";
        myObj5 = {
            "name":"John",
            "age":30,
            "cars": {
                "car1":"Ford",
                "car2":"BMW",
                "car3":"Fiat"
            }
        }
        delete myObj5.cars.car2;

        for (i in myObj5.cars) {
            x5 += myObj5.cars[i] + "<br>";
        }

        document.getElementById("demo6").innerHTML = x5;
    </script>
</div>
</body>
</html>