How to iterate a JavaScript object's properties using jQuery?

Programming Scripts jQuery Front End Technology

In this article, we are going to learn how to iterate a JavaScript object’s properties using jQuery.

The simplest way to iterate over an object with JavaScript is to use a for in loop.

The for statement will iterate over the objects as an array, but the loop will send the key to the object instead of an index as a parameter.

This loop is used to iterate over all non-Symbol iterative properties of an object. The hasOwnProperty() method can be used to check if the property belongs to the object itself. The value of each key of the object can be found by using the key as the index of the object.

Syntax

Following is the syntax for iterating a JavaScript object’s using jQuery.

for (let key in example) {
   if (example.hasOwnProperty(key)) {
      value = example[key];
      console.log(key, value);
   }
}

Example

Following is the example program for iterating JavaScript object’s using jQuery.


<!DOCTYPE html>
<html>
<head>
   <title>
   </title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script>
      function iterateObject() {
         let example = {
            Book: "Rich Dad Poor Dad",
            Author: "Robert Kiyosaki",
         };
         for (let key in example) {
            if (example.hasOwnProperty(key))
            {
               value = example[key];
               document.write(key, value, "<br>");
            }
         }
      }
   </script>
</body>
</html>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page

Example

Following is another example program for iterating JavaScript object’s using jQuery.


<!DOCTYPE html>
<html>
<head>
   <title>
   </title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script>
      function iterateObject() {
         let example = {
            Student: "Amar",
            Branch: "Information Technology",
            Section:"A",
            Rollno:22
         };
         for (let key in example) {
            if (example.hasOwnProperty(key))
            {
               value = example[key];
               document.write(key, value, "<br>");
            }
         }
      }
   </script>
</body>
</html>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page.

Using Object.entries()

We can also use Object.entries() method is used to return an array of the object’s own enumerable string-keyed property pairs. The array is used with the map() method to extract the key and value from the pairs of the context.

The key and values from the key-value pair can be extracted by accessing the first and second index of the array pair. The first index corresponds to the key and the second index corresponds to the value of the pair.

Syntax

Following is the syntax for iterating a JavaScript object’s using jQuery.

Object.entries(example).map(entry => {
   let key = entry[0];
   let value = entry[1];
   console.log(key, value);
});

Example

Following is the example program for iterating JavaScript object’s using jQuery.


<!DOCTYPE html>
<html>
<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">
</head>
<body>
   <button onclick="iterateObject()">
      Iterate
   </button>
   <script >
      function iterateObject() {
         let example = {
            Student: "Amar",
            Branch: "Information Technology",
            Section:"A",
            Rollno:22
         };
         Object.entries(example).map(entry => {
            let key = entry[0];
            let value = entry[1];
            document.write(key, ": ", value, "<br>");
         });
      }  
   </script>
</body>
</html>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page.