Sometimes you have to handle some type of array (JSONArray, int Array, etc) at client side, i.e. in JSP or html file. And you want to iterate this array in JavaScript. How is this possible?
Iterating through a JSONArray in JavaScript is a process of accessing each element of an array containing JSON objects and performing a specific operation on each of them. This is a common task in web development when dealing with data in JSON format, such as when retrieving data from an API or a database.
The JSONArray can be accessed using the JSON.parse() method in JavaScript, which converts a JSON string into a JavaScript object. Once the JSON array is converted into a JavaScript object, you can use a loop such as a for loop, a forEach loop, or a for…in loop to iterate through each object in the array.
During each iteration, you can access the properties of each JSON object using the dot notation or bracket notation. The data can be displayed or manipulated in various ways, such as adding it to a table or performing calculations on it.
Iterating through a JSONArray in JavaScript is a fundamental skill for web developers who need to work with data in JSON format, and is an essential component of building dynamic and responsive web applications.
I’ve created simple complete solution with an example. Below example will get JSONArray as an input and we will iterate through it and will create HTML table to make sure it’s working.
Example-1.
Input Data:
Result:
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<meta charset="UTF-8">
<TITLE>Crunchify - Iterate through JSONArray in JavaScript</TITLE>
<meta name="description" content="Crunchify - Iterate through JSONArray in JavaScript.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-image:
url('https://crunchify.com/bg.png');
}
p {
width: 70%;
}
</style>
<script>
var graph = {
"sparkData" : [ {
"one" : [ 97, 5, 69, 35, 28, 52, 51, 55 ]
}, {
"two" : [ 96, 63, 18, 55, 13, 47, 77, 64 ]
}, {
"three" : [ 94, 75, 83, 44, 43, 86, 68, 26 ]
} ]
}
var i = 0;
document.writeln("<br><br><div align='center'>Here is a HTML output from JSON Array..");
document.writeln("<br><br><table border='1'><tr>");
for ( var i = 0; i < graph.sparkData.length; i++) {
var obj = graph.sparkData[i];
console.log(obj);
var crunchifyName;
var crunchifyValue;
document.writeln("<td>");
document.writeln("<table border='0' width=100 >");
for ( var key in obj) {
crunchifyName = key;
crunchifyValue = obj[key].toString();
+document.writeln("<tr><td><B>" + crunchifyName
+ ": </B></td><td width=50>" + crunchifyValue
+ "</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
}
document.writeln("</tr></table></div>");
</script>
</HEAD>
<BODY>
<br>
<br><br>
<div align="center">
<h1>Part of Crunchify Tutorial Series...</h1>
</div>
<br><br>
<div align="center">
<div
style="font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;">
Crunchify - Iterate through JSONArray in JavaScript by <a
href='https://crunchify.com'>Crunchify</a>. Click <a
href='https://crunchify.com/category/java-tutorials/'>here</a>
for all Java, Spring MVC, Web Development examples.<br>
</div>
</div>
</BODY>
</HTML>
Example-2:
You can put below code to above .html file to see console result.
Input Data:
var dictionary = {
"employee1":[
{"id":"0","name":"Google"},
{"id":"1","name":"eBay"}
],
"employee2": [
{"id":"2","name":"Yahoo"},
{"id":"3","name":"Facebook"}
]
};
Javascript code to iterate above JSON element:
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<meta charset="UTF-8">
<TITLE>Crunchify - Iterate through JSONArray in JavaScript</TITLE>
<meta name="description" content="Crunchify - Iterate through JSONArray in JavaScript.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-image:
url('https://crunchify.com/bg.png');
}
p {
width: 70%;
}
</style>
<script>
var dictionary = {
"employee1":[
{"id":"0","name":"Google"},
{"id":"1","name":"eBay"}
],
"employee2": [
{"id":"2","name":"Yahoo"},
{"id":"3","name":"Facebook"}
]
};
var employee1 = dictionary.employee1;
var employee2 = dictionary.employee2;
for(var i in employee1)
{
var id = employee1[i].id;
var name = employee1[i].name;
console.log(id);
console.log(name);
}
for(var i in employee2)
{
var id = employee2[i].id;
var name = employee2[i].name;
console.log(id);
console.log(name);
}
</script>
</HEAD>
<BODY>
<br>
<br><br>
<div align="center">
<h1>Part of Crunchify Tutorial Series...</h1>
</div>
<br><br>
<div align="center">
<div
style="font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;">
Crunchify - Iterate through JSONArray in JavaScript by <a
href='https://crunchify.com'>Crunchify</a>. Click <a
href='https://crunchify.com/category/java-tutorials/'>here</a>
for all Java, Spring MVC, Web Development examples.<br>
</div>
</div>
</BODY>
</HTML>
Result from console log (Google Chrome):
