Skip to content
javascript

How to to solve 'TypeError: forEach is not a function' error in javascript

Jun 15, 2022Abhishek EH3 Min Read
How to to solve 'TypeError: forEach is not a function' error in javascript

When you are a developer, you may need to use loops every other day. Sometimes you will end up looping items that are not iterable. In this article, we will discuss scenarios where you will get the following error when you try to use forEach function.

1index.html:20 Uncaught TypeError: listItems.forEach is not a function

Replicating the issue

Before jumping into the solutions, let's replicate the issue.

Scenario 1

Consider the below code:

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <ul>
11 <li>Item 1</li>
12 <li>Item 2</li>
13 <li>Item 3</li>
14 <li>Item 4</li>
15 <li>Item 5</li>
16 </ul>
17 </body>
18 <script>
19 const listItems = document.getElementsByTagName("li")
20 listItems.forEach(item => {
21 console.log(item.innerText)
22 })
23 </script>
24</html>

In the above code, we have 5 list items, created a reference to them using document.getElementsByTagName("li"), and printed the text content on it.

Prima face, you will not find any issues with the code. But when you run the code, you will see the following error in the browser console.

Uncaught TypeError: forEach is not a function

Scenario 2

Consider the following code:

1const person = {
2 firstName: "John",
3 lastName: "Doe",
4 age: 28,
5}
6
7person.forEach(item => {
8 console.log(item.key + ": " + item.value)
9})

If you run the above code in the browser console, you will get a similar error as before:

Error: person forEach is not a function

The solution

The reason why the error happens is that you are trying to call .forEach function on something which is not an array, Map, or Set. So how do we iterate them then? We will solve them based on the scenario.

Scenario 1

Any getElementsBy* (getElementsByTagName,getElementsByClassName, etc) call retruns an HTMLCollection. If you need to iterate them using forEach, then create an array by copying the collection using Array.from as shown below

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <ul>
11 <li>Item 1</li>
12 <li>Item 2</li>
13 <li>Item 3</li>
14 <li>Item 4</li>
15 <li>Item 5</li>
16 </ul>
17 </body>
18 <script>
19 const listItems = document.getElementsByTagName("li")
20 Array.from(listItems).forEach(item => {
21 console.log(item.innerText)
22 })
23 </script>
24</html>

Now if you run the code, you should be able to see the name of the items printed in the console.

You can still use the traditional for loop with the collection of HTMLElement.

Scenario 2

In the second scenario, we are trying to loop an object.

You can loop the object using the following code:

1const person = {
2 firstName: "John",
3 lastName: "Doe",
4 age: 28,
5}
6
7const keys = Object.keys(person)
8
9keys.forEach(key => {
10 console.log(key + ": " + person[key])
11})

In the above code, Object.keys returns an array of keys in the object and we are iterating the array of keys.

You can also use for..in syntax to iterate the object.

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2022 CodingDeft.Com