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:
