JavaScript JSON Objects

18 Nov, 2020
JSON Objects: JavaScript Object Notation (JSON) is a text-based, human-readable interchange format used for representing simple data structures and objects in web browser-based code.JavaScript objects can only exist within the JavaScript language, so when you are working with data that needs to be accessed by various languages, it is best to refer to JSON.
Rules to declare an object:
The object is always defined inside the curly brackets { }.
Objects are written in key pairs.
The keys must be strings, and their values must be a valid JSON data type.The JSON data types can be number,string, object, boolean, array, or null.
The keys and values are separated by a colon(“:”).
Each key or value pair is separated by a comma.
myOrder = {};
Example:
myOrder = {
    "name of product" : "earbuds", 
    "cost" : "799", 
    "warranty" : "1 year"
};
Accessing Object Values:
The object values can be accessed by using the dot (“.”) notation.We can also access objects by using bracket([]) notation.
The object values can be accessed by using the dot (“.”) notation.
We can also access objects by using bracket([]) notation.
Example 1: In the below program we are accessing the object using “.” notation.
HTML
<!DOCTYPE html><html>  <body>    <h2>Welcome To GFG</h2>    <p id="objectaccessing"></p>      <script>        var myOrder, i;          // Object is created with name myOrder        myOrder = {            "name_of_the_product": "earbuds",             "cost": "799",            "warranty": "1 year "        };          // Accessing for particular detail        // from object myOrder        i = myOrder.name_of_the_product;          // It prints the detail of name        // of the product        document.getElementById(            "objectaccessing").innerHTML = i;    </script></body>  </html>
Output:Example 2:
HTML
<!DOCTYPE html><html>  <body>    <h2>Welcome To GFG</h2>    <p id="Accessingobj"></p>      <script>        var myOrder, i;        myOrder = {            "name_of_product": "earbuds",             "cost": "799",            "warranty": "1 year"        };          // Accessing object using [] notation        i = myOrder["name_of_product"];          document.getElementById(            "Accessingobj").innerHTML = i;    </script></body>  </html>
Output:
Nesting of objects in JSON: Objects can be nested inside other objects having a unique access path. In the same document, the same field name can occur in objects which are nested. The access name must be unique. In short, the nested objects will be defined or assigned in other objects.
Example:
 
myOrder = {
    "name of product" : "earbuds", 
    "cost" : "799", 
    "warranty" : { 
        "warranty1" : "6 months", 
        "warranty2 : "12 months"
    }
};

In the above example, we have declared another object within the object.
Note: We can even access the nested objects using dot(“.”) notation.
Example:
 i = myOrder.warranty.warranty2;
or
 i = myOrder.warranty[warranty2];
Modify values Of object: To modify the values, we have two ways.
The values of the object can modify by using a dot(“.”) notation.The values of the object can modify by using bracket (“[ ]”) notation.
The values of the object can modify by using a dot(“.”) notation.
The values of the object can modify by using bracket (“[ ]”) notation.
Example for first :
myOrder.warranty.warranty2 = "3 months";

Example for second:
i = myOrder.warranty[warranty2] = "3 months";

Delete Object Properties: We can delete the JSON object properties by using the “delete” keyword.
Example:
delete myOrder.warranty.warranty2;

Looping an Object: Looping can be done in two ways –
Looping of an object can be done by using a property for-in loop.For looping an object we can even use brackets (“[]”) in the for-in loop property.
Looping of an object can be done by using a property for-in loop.
For looping an object we can even use brackets (“[]”) in the for-in loop property.
Example 1:
HTML
<!DOCTYPE html><html>  <body>    <h2>Welcome To GFG</h2>    <p id="AccessingObj"></p>      <script>        var myOrder, a;        myOrder = {            "name of product": "earbuds",            "cost": "799", "warranty": "1 year"        };              for (a in myOrder) {              // Accessing loop object             // using dot notation            document.getElementById(                "AccessingObj").innerHTML                += a + "<br>";        }    </script></body>  </html>
Output:
myObj = {
    "name of product" : "earbuds", 
    "cost" : "799", 
    "warranty" : "1 year"
};
for (a in myOrder) {
    document.getElementById(
        "Accessingobj").innerHTML = a;
}

In this above example, we are trying to display only the object.
Example 2: In the below example we are accessing a looping object using bracket[] notation.
HTML
<!DOCTYPE html><html>  <body>    <h2>Welcome To GFG</h2>    <p id="Accessingobj"></p>      <script>        var myOrder, a;        myOrder = {            "name_of_product": "earbuds",             "cost": "799",            "warranty": "1 year"        };          for (a in myOrder) {              // Accesing object in looping            // using bracket notation            document.getElementById(                "Accessingobj").innerHTML                += myOrder[a] + "<br>";          }        </script></body>  </html>
Output:
myObj = {
    "name of product" : "earbuds", 
    "cost" : "799", 
    "warranty" : "1 year"
}; 

for (a in myOrder) {
    document.getElementById("Accessingobj")
        .innerHTML = myOrder[a];
}

HTML-Misc
JavaScript-Misc
JSON
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Angular File Upload
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request