JavaScript Loop Through Objects
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript loop through objects, we will see three different methods to loop through object. Now we will use For in loop, For each loop, and JavaScript object entries method.
For in loop: for in loop is used to loop over any object using keys. The syntax for the For-in loop is,
for (x in object) {
//block of code
}
For each loop: for each loop used for object keys method to extract all the keys from the object and put them in an array. so we can loop over each key and return the values.
The syntax for for-each loop is,
array.forEach(function(currentValue, index, array))
object entries method: object entries method returns a nested array of keys and values by looping through the array
Step By Step Guide On JavaScript Loop Through Objects :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript loop through objects</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3>JavaScript loop through objects</h3>
</center>
<script>
const person = {
id: 1,
firstName: 'peter',
lastName: 'cole',
age: '20',
gender: 'male',
} ;
//first method
for(const key in person) {
console.log(key,person[key]) ;
}
//second method
const keys = Object.keys(person) ;
keys.forEach(key => {
console.log(key,person[key]) ;
}) ;
//third method
const entries = Object.entries(person) ;
keys.forEach(entries => {
console.log(entries[0], entries[1]) ;
}) ;
for(const[key,value] of Object.entries) {
console.log(key,value);
}
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- using <script> tag to write JavaScript within it. And close it with the </script> tag.
- Using Const to create a object named person. Add some keys and values into it
- In first method , Using for-in loop to loop over the object using keys
- In second method, using for-each loop to extract all the keys with using object.keys() property.
- In the third method, we used object.entries() property to loop over object.
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know loop through objects using JavaScript.
I hope this article on JavaScript loop through objects helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
