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
How to iterate json array - JavaScript?
In JavaScript, iterating over JSON arrays is a common task when working with data from APIs or configuration files. A JSON array is an ordered list of values that can contain strings, numbers, booleans, objects, or other arrays.
This article demonstrates various methods to iterate through JSON arrays in JavaScript, from traditional loops to modern ES6+ approaches.
Understanding JSON Arrays
JSON arrays are ordered collections of values enclosed in square brackets. Each element is separated by commas and can be accessed using numeric indices.
Syntax
[
{
"car": "RX100",
"model": "2010"
},
{
"car": "Civic",
"model": "2018"
}
]
Method 1: Using Traditional for Loop
The traditional for loop provides full control over iteration and allows access to both index and values.
<!DOCTYPE html>
<html>
<body>
<div id="output1"></div>
<script>
var vehicles = [
{"vehicle": "Vespa", "engine": "B6"},
{"vehicle": "Honda", "engine": "V4"}
];
var output = "";
for (var i = 0; i < vehicles.length; i++) {
output += "Index " + i + ":<br>";
var obj = vehicles[i];
for (var key in obj) {
output += " " + key + ": " + obj[key] + "<br>";
}
output += "<br>";
}
document.getElementById("output1").innerHTML = output;
</script>
</body>
</html>
Method 2: Using for...in Loop
The for...in loop iterates over array indices, useful when you need to access specific properties.
<!DOCTYPE html>
<html>
<body>
<div id="output2"></div>
<script>
var array = [
{
"vehicle": "car",
"model": 2010
},
{
"vehicle": "bike",
"model": 2007
}
];
var result = "";
for (var key in array) {
if (array.hasOwnProperty(key)) {
result += array[key].vehicle + " - " + array[key].model + "<br>";
}
}
document.getElementById("output2").innerHTML = result;
</script>
</body>
</html>
Method 3: Using for...of Loop (ES6)
The for...of loop provides a cleaner syntax for iterating over array elements directly.
<!DOCTYPE html>
<html>
<body>
<div id="output3"></div>
<script>
var vehicles = [
{vehicle: 'Mercedes'},
{vehicle: 'Audi'},
{vehicle: 'BMW'}
];
var output = "";
for (var item of vehicles) {
output += item.vehicle + "<br>";
}
document.getElementById("output3").innerHTML = output;
</script>
</body>
</html>
Method 4: Using forEach() Method
The forEach() method is a functional approach that executes a callback function for each array element.
<!DOCTYPE html>
<html>
<body>
<div id="output4"></div>
<script>
var products = [
{name: 'Laptop', price: 1000},
{name: 'Phone', price: 500},
{name: 'Tablet', price: 300}
];
var output = "";
products.forEach(function(item, index) {
output += (index + 1) + ". " + item.name + ": $" + item.price + "<br>";
});
document.getElementById("output4").innerHTML = output;
</script>
</body>
</html>
Comparison of Methods
| Method | Syntax | Index Access | Break/Continue |
|---|---|---|---|
| for loop | Traditional | Yes | Yes |
| for...in | Simple | Yes | Yes |
| for...of | Modern | No | Yes |
| forEach() | Functional | Via parameter | No |
Conclusion
Choose the iteration method based on your needs: use traditional for loops when you need index control, for...of for clean modern syntax, or forEach() for functional programming approaches. Each method effectively handles JSON array iteration in different scenarios.
7K+ Views
