Table of Contents
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.
Scenario 2
Consider the following code:
1const person = {2 firstName: "John",3 lastName: "Doe",4 age: 28,5}67person.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:
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}67const keys = Object.keys(person)89keys.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