Loop Through Object JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of loop through object JavaScript, in javascript, we can not directly loop through an object.
When we want to loop an object, we have different options depending on what we want to loop over. we can loop over
- object property name
- object property value
- both on the object property name and value
Now in this tutorial we will use three methods as keys(), values() and entries() method first.
After using these methods we can use foreach loop through the object. The foreach loop is used to iterate over the element of an array.
- Keys(): by using this method we will get return an array. the array will contain the property name or the keys of the object.
- Values(): by using this method we will get return an array that will contain the value of the object.
- Entries(): this method we will get return of an array of arrays contain the keys and values of objects.
Step By Step Guide On Loop Through Object JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loop through object 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> TALKERSCODE </h1>
<h3> loop through object JavaScript </h3>
</center>
<script>
let person = {
name: 'peter' ,
age: 28 ,
gender: 'male' ,
}
//looping over object property name
let property = Object.keys(person) ;
//return array that contain the properties of the object
console.log(property) ;
for(let prop of property) {
console.log(prop) ;
}
//looping over object property values
let values = Object.values(person) ;
//return array that contain the properties value of the object
console.log(values) ;
for(let val of values) {
console.log(val) ;
}
//looping over both property name and values
let entries = Object.entries(person) ;
//return an array of arrays contain keys and values of object
console.log(entries) ;
for(let [key, val] of entries) {
console.log(`${key}: ${val}`) ;
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- We will use an external CSS file to style the html page
- Using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Create a <Script> tag to write JavaScript within it.
- Now using let to create an object name person and ad some keys and values within it
- To looping over the object properties name, we have created a variable property and used object.keys() property.
- Using console.log() to display the array of keys
- Now use foreach loop to loop through the array and display all the key
- To looping over object property values, we have created a variable value and used object.values() property
- Using console.log() to display the array of values
- Now use foreach loop to loop through the array and display all the values
- To looping over the object property of both key and values, we have created variable entries and used object.entries() property
- Using console.log() to display the array of the arrays of keys and values
- Now use foreach loop to loop through the array and display all the key and values
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to loop through objects in JavaScript.
I hope this article on loop through object JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
