The "forEach is not a function" error occurs when we call the forEach() method on a value that is not of type array, Map , or Set . To solve the error, make sure to only call the forEach method on arrays, Map or Set objects. Copied!
The forEach method is also used to loop through arrays, but it uses a function differently than the classic "for loop". The forEach method passes a callback function for each element of an array together with the following parameters: Current Value (required) - The value of the current array element.
forEach is not a function" error occurs because the forEach method is not implemented on objects. To iterate over an object, use the Object. keys() method to get an array of the object's keys and call the forEach() method on the array of keys.
forEach Asynchronous? It is not asynchronous. It is blocking. Those who first learned a language like Java, C, or Python before they try JS will get confused when they try to put an arbitrary delay or an API call in their loop body.
The parent.children
is an Array like object. Use the following solution:
const parent = this.el.parentElement;
Array.prototype.forEach.call(parent.children, child => {
console.log(child)
});
The parent.children
is NodeList
type, which is an Array like object because:
length
property, which indicates the number of nodes{0: NodeObject, 1: NodeObject, length: 2, ...}
See more details in this article.
parent.children
is an HTMLCollection
: which implements the iterable protocol. In an ES2015 environment, you can use the HTMLCollection
with any construction that accepts iterables.
Use HTMLCollection
with the spread operatator:
const parent = this.el.parentElement;
[...parent.children].forEach(child => {
console.log(child);
});
Or with the for..of
cycle (which is my preferred option):
const parent = this.el.parentElement;
for (const child of parent.children) {
console.log(child);
}
parent.children
is not an array. It is HTMLCollection and it does not have forEach
method. You can convert it to the array first. For example in ES6:
Array.from(parent.children).forEach(child => {
console.log(child)
});
or using spread operator:
[...parent.children].forEach(function (child) {
console.log(child)
});
A more naive version, at least you're sure that it'll work on all devices, without conversion and ES6 :
const children = parent.children;
for (var i = 0; i < children.length; i++){
console.log(children[i]);
}
https://jsfiddle.net/swb12kqn/5/
parent.children
will return a node list list, technically a html Collection. That is an array like object, but not an array, so you cannot call array functions over it directly. At this context you can use Array.from()
to convert that into a real array,
Array.from(parent.children).forEach(child => {
console.log(child)
})
parent.children
is a HTMLCollection
which is array-like object. First, you have to convert it to a real Array
to use Array.prototype
methods.
const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
console.log(child)
})
There is no need for the forEach
, you can iterate using only the from
's second parameter, like so:
let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
console.log(child)
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With