JavaScript | JSON Arrays
Last Updated :
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...