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:
Similar Reads
JavaScript JSON JSON (JavaScript Object Notation) is a lightweight data format for storing and exchanging data. It is widely used to send data between a server and a client. JSON is simple, language-independent, and easy to understand.JSON stands for JavaScript Object Notation.It is a lightweight, text-based data i
4 min read
Javascript | JSON PHP JSON stands for the JavaScript Object Notation. It is used to exchanging and storing the data from the web-server. JSON uses the object notation of JavaScript. JavaScript objects can be converted into the JSON and receive JSON format text into the JavaScript objects. Converting the JavaScript object
7 min read
JavaScript Array Exercise In JavaScript, an Array is a versatile data structure that allows you to store multiple values in a single variable. Arrays can hold different data types, including strings, numbers, objects, and even other arrays. JavaScript arrays are dynamic, which means they can grow or shrink in size.JavaScript
1 min read
JavaScript JSON Parser JSON (JavaScript Object Notation) is a popular lightweight data exchange format for sending data between a server and a client, or across various systems. JSON data is parsed and interpreted using a software component or library called a JSON parser. Through the JSON parsing process, a JSON string i
3 min read
Formatting Dynamic JSON array JavaScript Formatting a Dynamic JSON array is important because it organizes complex data structures, making them easier to read, manipulate, and communicate within applications and APIs. We will explore approaches to formatting dynamic JSON arrays in JavaScript. Below are the approaches to format dynamic JSON
2 min read