Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to iterate a JavaScript object's properties using jQuery?
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.
1K+ Views
