Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript JSON Arrays
JSON arrays are ordered lists of values enclosed in square brackets. In JavaScript, you can access and manipulate JSON arrays just like regular JavaScript arrays.
Syntax
{
"arrayName": ["value1", "value2", "value3"]
}
Basic JSON Array Structure
Here's how a JSON object with an array property looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Array Example</title>
</head>
<body>
<script>
let obj = {
name: 'Rohan',
sports: ['cricket', 'Football', 'volleyball', 'hockey']
};
console.log("JSON Object:", obj);
console.log("Sports Array:", obj.sports);
console.log("First Sport:", obj.sports[0]);
</script>
</body>
</html>
JSON Object: {name: 'Rohan', sports: Array(4)}
Sports Array: ['cricket', 'Football', 'volleyball', 'hockey']
First Sport: cricket
Accessing Array Elements
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<button onclick="displaySports()">Show Sports</button>
<script>
let player = {
name: 'Rohan',
sports: ['cricket', 'Football', 'volleyball', 'hockey']
};
function displaySports() {
let result = document.getElementById('result');
result.innerHTML = '<h3>Sports List:</h3>';
player.sports.forEach((sport, index) => {
result.innerHTML += `${index + 1}. ${sport}<br>`;
});
}
</script>
</body>
</html>
Common Operations
<!DOCTYPE html>
<html>
<body>
<div id="operations"></div>
<button onclick="performOperations()">Perform Array Operations</button>
<script>
let data = {
fruits: ['apple', 'banana', 'orange']
};
function performOperations() {
let output = document.getElementById('operations');
// Add element
data.fruits.push('grape');
output.innerHTML = 'After adding grape: ' + data.fruits.join(', ') + '<br>';
// Remove last element
let removed = data.fruits.pop();
output.innerHTML += 'After removing ' + removed + ': ' + data.fruits.join(', ') + '<br>';
// Array length
output.innerHTML += 'Array length: ' + data.fruits.length;
}
</script>
</body>
</html>
Nested JSON Arrays
<!DOCTYPE html>
<html>
<body>
<div id="nested"></div>
<button onclick="showNested()">Show Nested Data</button>
<script>
let school = {
name: 'ABC School',
students: [
{name: 'John', grades: [85, 90, 88]},
{name: 'Sara', grades: [92, 87, 95]},
{name: 'Mike', grades: [78, 85, 82]}
]
};
function showNested() {
let output = document.getElementById('nested');
output.innerHTML = '<h3>Student Grades:</h3>';
school.students.forEach(student => {
output.innerHTML += `${student.name}: ${student.grades.join(', ')}<br>`;
});
}
</script>
</body>
</html>
Key Points
- JSON arrays use square brackets
[]and can contain strings, numbers, objects, or other arrays - Array elements are accessed using zero-based indexing:
array[0] - Use methods like
push(),pop(),forEach()to manipulate arrays - JSON arrays maintain order and allow duplicate values
Conclusion
JSON arrays in JavaScript work exactly like regular arrays, providing powerful data organization capabilities. They're essential for handling lists of related data in web applications and APIs.
Updated on: 2026-03-15T23:18:59+05:30
334 Views
Advertisements