. Advertisement .
..3..
. Advertisement .
..4..
“Foreach is not a function” is among the most common errors in Javascript. We are pretty certain it has annoyed you many times by now. To rectify this mistake, check out our guidelines for tips and illustrations.
Why Does It Happen?
Let’s say you have got one array. You are attempting to loop it, and guess what? This error message pops up out of nowhere:
(index):116 Uncaught (in promise) TypeError: aArray.forEach is not a function
How is that even possible? Aren’t we looping arrays?
The most popular cause of this error is that you are attempting to loop an “array-like” collection instead of the actual array. For instance, HTMLCollection is not an array; it is just array-like.
How to Fix The Error “Foreach Is Not A Function”
If this error occurs on objects, one simple method is to use Object.Entries (), Object. Values (), or Object. Keys (). Use them to call forEach() on your returned array.
const empObj = {
name: 'Mary',
age: 30,
};
empObj.forEach(e => {
console.log(e);
});
The following error will transpire upon the program execution:
empObj.forEach(e => {
^
TypeError: empObj.forEach is not a function
at Object.<anonymous> (HelloWorld.js:7:8)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
Why does this error occur? The answer is simple: there is actually no direct method to call forEach() on your objects. So what should you do now? To tackle this dilemma, turn to Object. Keys() to obtain key arrays and yield forEach() on the keys.
const empObj = {
name: 'Mary',
age: 30,
};
console.log(Object.keys(empObj));
Object.keys(empObj).forEach(key => {
console.log(key +" - "+ empObj[key]);
});
Outputs:
[ 'name', 'age' ]
name - Mary
age - 30
If values are your main priorities, use Object.Values() instead:
const empObj = {
name: 'Mary',
age: 30,
};
console.log(Object.values(empObj));
Object.values(empObj).forEach(value => {
console.log(value);
});
Outputs:
[ 'name', 'age' ]
name - Mary
age - 30
But what if we require both value and key in the array? Then Object. Entries() is your rescuer:
const empObj = {
name: 'Mary',
age: 30,
};
console.log(Object.entries(empObj));
Object.entries(empObj).forEach(([key, value]) => {
console.log(key+" - "+value);
});
Outputs:
[ [ 'name', 'Mary' ], [ 'age', 30 ] ]
name - Mary
age - 30
Conclusion
This article has instructed you to fix the annoying error: “Foreach is not a function“. Depending on your specific purposes, you may employ Object.Entries (), Object. Values (), or Object. Keys (). Examples for each case are given, ensuring you have no trouble following our guides!Sometimes, on ECMAScript 6, this message might pop up amid your program: “Uncaught SyntaxError: Cannot use import statement outside a module”. To learn how to fix it, check out this article! You can also write to the ITtutoria team for more help.
Leave a comment