Loop Through An Array JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of loop through an array JavaScript, in JavaScript, we can create an array using the var function. Now as the title of the article says, we can loop through an array using JavaScript.
In this tutorial, after creating a multidimensional array and we are going to use ‘for loop’ in order to do looping through the array. Let us see the syntax of the for loop first,
for(initialization ; condition ; increment/decrement)
We also used a document.write() function to display the output of the loop.
Step By Step Guide On Loop Through An Array JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> loop through an array javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> loop through an array JavaScript </h3>
</center>
<script>
var people = [
{
name: "peter",
age: 22,
city: "tokyo" ,
gender: "male"
},
{
name: "mary",
age: 30,
city: "london" ,
gender: "female"
},
{
name: "thomas",
age: 19,
city: "paris" ,
gender: "male"
}
]
console.log(people[0].name) ;
for(var i=0; i<people.length; i++) {
if(people[i].age<20) {
document.write(people[i].name + ", " + people[i].city + " ") ;
}
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Creating a <style> tag to add CSS to the page. Also adding an external CSS file to add Style.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <script> tag to write JavaScript within it
- We have used the var function to create a multidimensional array with some keys and values.
- Using console.log() to display the array parameter
- Now create for loop to loop through the array
- Create an if-else statement to check if the condition is true then use document.write() to display the array parameter.
- Closing the script tag using </script>.
- we close the HTML file with </html> tag
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know to loop through an array using JavaScript.
I hope this article on loop through an array JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
