How to Iterate through a JavaScript Object

The iterate the object data using JavaScript keys. It helps to get particular datasets data with a unique number.

Iterating over an object can be accomplished in two ways, as discussed below:

Method 1: Using a for...in the loop
Method 2: Object.entries() map

Method 1: Using a for...in the loop

A for...in loop can be used to iterate over the object's properties. This loop is used to iterate over an object's non-Symbol iterable properties.

Some objects may have properties inherited from their prototypes. The function "hasOwnProperty() { [JavaScript code] }()" method has the ability to verify if the property belongs to the element itself.

The value of every key of the element can be identified by utilizing the key as the array index of the object.

Syntax

The following syntax shows the for...in loop for the key element.

<script>
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele)) {
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
</script>

The "for...in" loop uses for the iteration function in JavaScript.
The "hasOwnProperty()" uses to iterate a unique key for the particular data.
After, we can use native JavaScript code to display values.

Examples

The following examples show the iterate data using a JavaScript object with the "hasOwnProperty()" method.

Example1

The following JavaScript example shows iterate array data using the object.

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
JavaTpoint
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate data using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = [
"javatpoint.com",
"JavaScript language",
" online learning",
"programmer and student"
];
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele))
{
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
}</script>
</body>
</html>

Output

The following output image shows the display output and console output.

Before Clicking Button

How to Iterate through a JavaScript Object

After Clicking Button

Example2

The following JavaScript example shows iterate hash data using the object.

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
JavaTpoint
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = {
website: ": javatpoint.com",
subject: ": JavaScript ",
Mode: ": online",
User: ": Developer"
};
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele))
{
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
}</script>
</body>
</html>

Output

The following output image shows the display output and console output.

Method 2: Object.entries() map

The "Object.entries()" method displays an array of the object's own iterable string-key property pairs. The returned array is used to extract the key and value from the pairs using the map() method.

The key and value systems from the key-value pair can be retrieved by obtaining the array pair's first and second indexes.

The first index relates to the key, and the second index refers to the value of the series.

Syntax

The following syntax shows the "Object.entries()" loop for the key element.

<script>
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
</script>

The "Object.entries()" function uses a mapping operation to iterate keys and values
The element's first object (entries[0]) shows key information.
The element's second object (entries[1]) shows the original value.

Examples

The following examples show the iterated data using a JavaScript object with the object.entries() method.

Example1

The following JavaScript example shows iterate data or map values using the object.

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style=" color: red">
JavaTpoint
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = {
website: ": javatpoint.com",
subject: ": JavaScript",
Mode: ": online",
User: ": developer and student"
};
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
}
</script>
</body>
</html>

Output

The following output image shows the display output and console output.

Before Clicking Button

After Clicking Button

Example2

The following JavaScript example shows iterate array values using the object.

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
JavaTpoint
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = [
"javatpoint.com",
"JavaScript",
"online",
"developer and student"
];
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
}
</script>
</body>
</html>

Output

The following output image shows the display output and console output.

Conclusion

The iteration of the multiple data is required to display and operate using JavaScript. The two methods are used to display iteration data using the object. It is a simple and essential function for the developer to get the key and value of the information.

Next TopicJavaScript Fetch API

← prev next →