You want to iterate through all the sub-element of an object, and you choose to use forEach(). After all, in the output, you only get an error message: “forEach is not a function” in JavaScript. In this article, we will give you some solutions.
Why does this error arise?
Besides using ‘for loop’, JavaScript provides another method called forEach() to help you loop through each element of an object. The forEach() method allows user to apply a function on every sub-element.
The problem actually happens when you call forEach() function on an object that is not an array, map, or set object.
Now take a look at some examples when the error occurs:
In “index.html”:
<!DOCTYPE html>
<html>
<body>
<div class="example">Element1</div>
<div class="example">Element2</div>
<div class="example">Element3</div>
</body>
</html>In “main,js”:
//Create a variable of type String
let city = "Amsterdam"
//Create a variable of type Object
let myCar = {
brand: "BMW",
name: "X6",
model: 2022
}
//Create a variable that store DOM Element
const collection = document.getElementsByClassName("example");
city.forEach(character => {
console.log(character)
})
myCar.forEach(information => {
console.log(information)
})
collection.forEach(c => {
console.log(c)
}) Output:
TypeError: city.forEach is not a function
TypeError: myCar.forEach is not a function
TypeError: collection.forEach is not a functionSolving: forEach is not a function in JavaScript
There are two ways for us to resolve this problem.
Let’s see how to use them and use cases.
Using Array.from() to convert an object to array
Example 1 – Working with string:
In “example1.js”:
let city = "Amsterdam"
Array.from(city).forEach(character => {
console.log(character)
})Output:
A
m
s
t
e
r
d
a
mExample 2 – Working with DOM elements:
In “example2.js”:
const collection = document.getElementsByClassName("example");
Array.from(collection).forEach(c => {
console.log(c)
})Output:
<div class="example">Element1</div>
<div class="example">Element1</div>
<div class="example">Element1</div>Using Object.keys(), Object.values() or Object.entries()
If you are working with an object, you can use Object.keys() to get an array of object’s keys, Object.values() to get an array of object’s values, and the same for Object.entries().
Example 3:
In “example3.js”:
let myCar = {
brand: "BMW",
name: "X6",
model: 2022
}
//Using Object.keys()
Object.keys(myCar).forEach(key => {
console.log(“Key: ” + key)
})
//Using Object.values()
Object.values(myCar).forEach(val => {
console.log(“Value: ” + val)
})
//Using Object.entries()
Object.entries(myCar).forEach(e => {
console.log(“Element: ” + e)
})Output:
Key: brand
Key: name
Key: model
Value: BMW
Value: X6
Value: 2022
Element: brand,BMW
Element: name,X6
Element: model,2022Summary
Finally, the problem is solved. You will use the corresponding method in each case to avoid the error “forEach is not a function” in JavaScript. I hope the information in this article is helpful for you.
Maybe you are interested in similar errors:
- [ERR_REQUIRE_ESM]: require() not supported
- Uncaught SyntaxError: Unexpected token
- Cannot read properties of undefined
- Invalid shorthand property initializer
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js
