To traverse object data in JavaScript, one can utilize the keys of the object. This technique is useful for retrieving specific datasets associated with a unique identifier.
There are two primary methods for iterating through an object, which are outlined as follows:
- Method 1: Utilizing a for...in loop
- Method 2: Mapping with Object.entries
Method 1: Using a for...in the loop
The for...in loop serves the purpose of traversing the properties of an object. It is specifically designed to iterate through an object's properties that are non-Symbol iterable.
Certain objects can possess characteristics that are derived from their prototypes. The method "hasOwnProperty { [JavaScript code] }" is designed to determine whether a specific property is an intrinsic part of the object itself.
The value corresponding to each key of the element can be ascertained by employing the key as the index in the object's array.
Syntax
The syntax below illustrates the for...in loop utilized 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 subsequent examples demonstrate how to iterate over data utilizing a JavaScript object in conjunction with the "hasOwnProperty" method.
Example1
The JavaScript example below demonstrates how to iterate through array data utilizing an object.
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
Example
</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 = [
"logic-practice.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 image presented below illustrates both the display output and the console output.
Before Clicking Button
After Clicking Button
Example2
The subsequent JavaScript illustration demonstrates how to traverse hash data by utilizing an object.
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
Example
</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: ": logic-practice.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 image presented below illustrates both the visual output on the display and the output generated in the console.
Method 2: Object.entries map
The "Object.entries" function returns an array consisting of the object's own iterable property pairs, where the keys are strings. This resulting array can be utilized to obtain both the keys and values from the pairs by employing the map function.
The key and value components from the key-value pair can be accessed by retrieving the first and second indexes of the array pair.
The initial index corresponds to the key, while the subsequent index pertains to the value of the series.
Syntax
The syntax provided below illustrates the usage of the "Object.entries" method to iterate over the key elements.
<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 subsequent examples demonstrate the iteration of data utilizing a JavaScript object in conjunction with the object.entries method.
Example1
The subsequent JavaScript illustration demonstrates how to traverse data or map values by utilizing an object.
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style=" color: red">
Example
</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: ": logic-practice.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 image output displayed below illustrates both the visual output on the screen and the corresponding output in the console.
Before Clicking Button
After Clicking Button
Example2
The subsequent JavaScript example demonstrates how to traverse the values of an array by utilizing an object.
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
Example
</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 = [
"logic-practice.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 image presented below illustrates both the visual output on the screen and the output displayed in the console.
Conclusion
Iterating over multiple data sets is necessary for displaying and manipulating information through JavaScript. There are two primary approaches for showcasing iterative data utilizing objects. This serves as a fundamental and vital function for developers to retrieve both the keys and values associated with the data.