Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Iterate JSON Array in JavaScript
In JavaScript, arrays are used to hold several values in a single variable. Compare that to a variable that only has room for one value. Each item in an array has a number associated with it that you may access by using, referred to as a numeric index.
The task we will perform in this article is "How to iterate a JSON array in JavaScript". Let's get started with the article to get a better understanding of iterating a JSON array.
Iterating JSON array
Ordered lists of values are represented by JSON arrays. Multiple values can be stored in a JSON array. In JSON array, you can store a string, a number, a Boolean, or an object.
Values in a JSON array must be separated by commas. It is represented by the [(square bracket).
Syntax
Following is the syntax for JSON array -
{
"car":"RX100",
"model": "2010",
}
Let's look at the following example to learn more about iterating over a JSON array.
Example
In the following example, we are running the script for iterating the JSON array.
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6">
<script>
var array = [ {"vehicle":"Vespa", "engine": "B6"}];
for (var i = 0; i < array.length; i++){
document.write("<br><br>index value: " + i);
var obj = array[i];
for (var key in obj){
var value = obj[key];
document.write("<br> - " + key + ": " + value);
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the values that got printed from the JSON array displayed on the webpage.
Example
Considering the following example, where we are running the script to iterate the JSON array and get the specific value from it.
<!DOCTYPE html>
<html>
<body style="background-color:#FAE5D3">
<script>
var array= [{
"vehicle": "car",
"model": 2010,
},{
"vehicle": "bike",
"model": 2007,
}
];
for (var key in array ) {
if (array.hasOwnProperty(key)) {
document.write(array[key].vehicle+"<br>");
}
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the values that were obtained from the JSON array displayed on the webpage.
Example
Let's execute the below script and observe how we iterate the JSON array.
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<script>
var array = [{vehicle:'Benz'}, {vehicle:'Audi'}];
for (var result of array){
document.write(result.vehicle + "<br />");
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of values displayed on the webpage, obtained by iterating the array and getting the specific value.
7K+ Views
