All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Loop Through Object JavaScript

Last Updated : Sep 5, 2023

Loop Through Object JavaScript

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>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. We will use an external CSS file to style the html page
  6. Using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. Create a <Script> tag to write JavaScript within it.
  9. Now using let to create an object name person and ad some keys and values within it
  10. To looping over the object properties name, we have created a variable property and used object.keys() property.
  11. Using console.log() to display the array of keys
  12. Now use foreach loop to loop through the array and display all the key
  13. To looping over object property values, we have created a variable value and used object.values() property
  14. Using console.log() to display the array of values
  15. Now use foreach loop to loop through the array and display all the values
  16. To looping over the object property of both key and values, we have created variable entries and used object.entries() property
  17. Using console.log() to display the array of the arrays of keys and values
  18. 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.