forEach is not a function error with JavaScript array

Question

I m trying to make a simple loop   const parent   this el parentElement console log parent children  parent children forEach child   gt      console log child       But I get the following error      VM384 53 Uncaught TypeError  parent children forEach is not a function   Even though parent children logs     What could be the problem   Note  Here s a JSFiddle

User · Answer

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   gt      console log child

User · Answer

There is no need for the forEach  you can iterate using only the from s second parameter  like so    x000D   x000D  let nodeList     0     a  1  b  2    c  3     1      x000D  Array from nodeList  child   gt    x000D    console log child  x000D      x000D   x000D   x000D

User · Answer

You can check if you typed forEach correctly  if you typed foreach like in other programming languages it won t work

User · Answer

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   gt        console log child        or using spread operator       parent children  forEach function  child        console log child

User · Answer

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   gt      console log child

User · Answer

That s because parent children is a NodeList  and it doesn t support the  forEach method  as NodeList is an array like structure but not an array   so try to call it by first converting it to array using  var children      slice call parent children   children forEach yourFunc

User · Answer

If you are trying to loop over a NodeList like this   const allParagraphs   document querySelectorAll  p      I highly recommend loop it this way   Array prototype forEach call allParagraphs   function el           Write your code here      Personally  I ve tried several ways but most of them didn t work as I wanted to loop over a NodeList  but this one works like a charm  give it a try   The NodeList isn t an Array  but we treat it as an Array  using Array  So  you need to know that it is not supported in older browsers   Need more information about NodeList  Please read its documentation on MDN

User · Answer

You can use childNodes instead of children  childNodes is also more reliable considering browser compatibility issues  more info here    parent childNodes forEach function  child        console log child        or using spread operator       parent children  forEach function  child        console log child

User · Answer

First option  invoke forEach indirectly  The parent children is an Array like object  Use the following solution   const parent   this el parentElement   Array prototype forEach call parent children  child   gt      console log child        The parent children is NodeList type  which is an Array like object because    It contains the length property  which indicates the number of nodes Each node is a property value with numeric name  starting from 0   0  NodeObject  1  NodeObject  length  2         See more details in this article     Second option  use the iterable protocol  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   gt      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

User · Answer

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  lt  children length  i         console log children i        https   jsfiddle net swb12kqn 5

User · Answer

Since you are using features of ES6  arrow functions   you may also simply use a for loop like this    x000D   x000D  for let child of   0     a  1  b  2    c  3     1         x000D    console log child  x000D    x000D   x000D   x000D

[javascript] forEach is not a function error with JavaScript array

Examples related to javascript

Examples related to ecmascript-6

Examples related to vue.js