“ForEach Is Not A Function” In JavaScript – How To Fix?

“forEach is not a function”

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 function

Solving: 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
m

Example 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,2022

Summary

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:

Leave a Reply

Your email address will not be published. Required fields are marked *