Foreach is not a function javascript – How to Fix forEach is not a function Error in JavaScript?

Foreach is not a function javascript: When we call the forEach() method on a value that is not of the type array, Map, or Set, we get the "forEach is not a function" error. To fix the problem, only use the forEach function on arrays, Map, or Set objects.

Let us see the examples to know how this error occurs.

index.js:

// Get all the boxes from the html script containing class name box
const boxes = document.getElementsByClassName('box');
console.log(boxes); // [div.box, div.box, div.box]

// Here we get Uncaught TypeError: boxes.forEach is not a function error
boxes.forEach(element => {
  console.log(element);
});

// create an empty object
const object = {};

// Uncaught TypeError: obj.forEach is not a function
object.forEach(i=> {
  console.log(i);
});

Explanation:

In the first example, we use the getElementsByClassName function to obtain an array-like
object, then tried to call the Array.forEach() method on it and obtain an error.

The second example invokes the forEach method on an object, and we get an error 
because it isn't implemented on objects.

Fixing forEach is not a function Error in JavaScript

//  with DOM elements
const boxes = document.getElementsByClassName('box');
console.log(boxes); // Output => [div.box, div.box, div.box]

Array.from(boxes).forEach(element => {
  console.log(element);
});

// Create an object which contains some random key value pairs
const object = {EmpCountry: "India", EmpName: "Alex"};
// Iterate in the above object using the forEach() loop
Object.keys(object).forEach(key => {
  console.log(key); // Output=> "EmpCountry", "EmpName"
  console.log(object[key]); // Output = > "India", "Alex"
});

Output:

[div.box, div.box, div.box]
EmpCountry
India
EmpName
Alex

Before calling the forEach() method, we utilized the Array.from() method to convert the array-like object to an array.

In the second example, we used the Object.keys() function to obtain an array of the object’s keys before calling/invoking the forEach() method for iterating over the array

Alternatively, before invoking the forEach method, you can check to see if the value is of the correct type.

index.js:

// Take a variable and initiaize its value with null
const gvn_arry = null;

// Check if the type of above variable is an array using the 
// isArray() function function and if conditional statement
if (Array.isArray(gvn_arry)) {
  // If it is an array, then iterate over each element of
  // of an array using the forEach() loop and print it
  gvn_arry.forEach(i => {
    console.log(i);
  });
}

Output:

Explanation:

Here it prints nothing since the given variable gvn_arry is not an array.
It is initialized with a null value.

To determine whether the gvn_arry variable stores an array, we utilized the Array.isArray() method. The forEach method is then only called if the variable contains an array.

If the “forEach is not a function” issue continues,  print the value that you are calling the forEach method on using console.log  and ensure it’s an array, Map, or Set depending upon the use case.

If the value is retrieved/fetched from a remote server, ensure that the JSON has been parsed to a native JavaScript array before calling the forEach method.

Example2: index.js

// Give the array as static input and store it in a variable
const gvn_arry = [1, 3, 6];

// Check if the type of above variable is an array using the 
// isArray() function function and if conditional statement
if (Array.isArray(gvn_arry)) {
  // If it is an array, then iterate over each element of
  // of an array using the forEach() loop and print it
  gvn_arry.forEach(i => {
    console.log(i);
  });
}

Output:

1
3
6