JavaScript | JSON Arrays - GeeksforGeeks

28 May, 2021
The JSON Arrays is similar to JavaScript Arrays. 
Syntax of Arrays in JSON Objects: 
// JSON Arrays Syntax

{
    "name":"Peter parker",
    "heroName": "Spiderman",
    "friends" : ["Deadpool", "Hulk", "Wolverine"]
}
Accessing Array Values: The Array values can be accessed using the index of each element in an Array. 
HTML
<!DOCTYPE html><html> <head>    <title>Page Title</title></head> <body>     <p id="paraId"></p>      <script>        var spidermanDetail = {            "name": "Peter parker",            "heroName": "Spiderman",            "friends": ["Deadpool", "Hulk", "Wolverine"]        };         var x = spidermanDetail.friends[0];        document.getElementById("paraId").innerHTML = x;    </script></body> </html>
Output: 
Deadpool
Looping over an Array: The for-in loop can be used for iterating through Array. 
HTML
<!DOCTYPE html><html> <head>    <title>Page Title</title></head> <body>     <p id="paraId"></p>      <script>        var str = "";        var spidermanDetail = {            "name": "Peter parker",            "heroName": "Spiderman",            "friends": ["Deadpool", "Hulk", "Wolverine"]        };         for (i in spidermanDetail.friends) {            str += spidermanDetail.friends[i] + "<br/>";        }         document.getElementById("paraId").innerHTML = str;    </script></body> </html>
Output: 
Deadpool
Hulk
Wolverine
Modifying an Array Values: An index number can be used for the modification of values. 
HTML
<!DOCTYPE html><html> <head>    <title>Page Title</title></head> <body>     <p id="paraId"></p>      <script>        var str = "";        var spidermanDetail = {            "name": "Peter parker",            "heroName": "Spiderman",            "friends": ["Deadpool", "Hulk", "Wolverine"]        };         spidermanDetail.friends[1] = "Iron Man";         for (i in spidermanDetail.friends) {            str += spidermanDetail.friends[i] + "<br/>";        }         document.getElementById("paraId").innerHTML = str;    </script></body> </html>
Output: 
Deadpool
Iron Man
Wolverine
Deleting Array Values: The values of an Array can be deleted using delete keyword. 
HTML
<!DOCTYPE html><html> <head>    <title>Page Title</title></head> <body>     <p id="paraId"></p>      <script>        var str = "";        var spidermanDetail = {            "name": "Peter parker",            "heroName": "Spiderman",            "friends": ["Deadpool", "Hulk", "Wolverine"]        };         delete spidermanDetail.friends[2];         for (i in spidermanDetail.friends) {            str += spidermanDetail.friends[i] + "<br/>";        }         document.getElementById("paraId").innerHTML = str;    </script></body> </html>
Output: 
Deadpool
Hulk
Nested Arrays in JSON Objects: In the nested array, another array can also be a value of an array. 
HTML
<!DOCTYPE html><html> <head>    <title>Page Title</title></head> <body>     <p id="paraId"></p>      <script>        var str = "";        var spidermanDetail = {            "name": "Peter parker",            "heroName": "Spiderman",            "friends": [{                "heroName": "Deadpool",                "skills": ["Martial artist", "Assassin"]            }, {                "heroName": "Hulk",                "skills": ["Superhuman Speed", "Superhuman Strength"]            }, {                "heroName": "Wolverine",                "skills": ["Retractable bone claws", "Superhuman senses"]            }]        };         for (i in spidermanDetail.friends) {            str += "<h3>" + spidermanDetail.friends[i].heroName + "</h3>";            for (j in spidermanDetail.friends[i].skills) {                str += spidermanDetail.friends[i].skills[j] + "<br/>";            }        }         document.getElementById("paraId").innerHTML = str;    </script></body> </html>
Output:  
 
anikakapoor
JSON
Picked
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
Difference Between PUT and PATCH Request
Set the value of an input field in JavaScript
Form validation using HTML and JavaScript
How to Use the JavaScript Fetch API to Get Data?
How to filter object array based on attributes?
How to remove duplicate elements from JavaScript Array ?
Create a Responsive Navbar using ReactJS