How do I loop through children objects in javascript

Question

I have this code in a function   tableFields   tableFields children  for  item in tableFields           Do stuff     According to a console log of tableFields  I am getting an array back as I assume I need to do  A console log of item within the loops returns undefined  What do I have to do to loop through tableFields and insert each object into a table   console log of tableFields   HTMLCollection label  input  label  input 25  label  input  input  input Remove    0 label  1 input  2 label  3 input 25  4 label  5 input  6 input  7  input Remove  description   input  hours   input  invoice number input  getlength 8  rate   input 25  item item    iterator iterator    namedItem namedItem      proto   HTMLCollectionPrototype   item item    namedItem namedItem    iterator iterator      Here is the entire section of code as I have so far    this- gt title  Test         this- gt defaultMenu         select            names   Customer  getNames        foreach   names as  id   gt   name             select      lt option value     id              if   this- gt customerid     id   select      selected             select      gt    name   lt  option gt                form      lt script type  text javascript  gt   var counter   0   function isEven int   int   Number int   return  int 2    0        function moreLabor          var table   document getElementById  editTable        var tableFields   document getElementById  readroot         tableFields   tableFields children      console log tableFields       for  item in tableFields             if  isEven counter                 var tableRow   table insertRow -1               var label   tableRow insertCell -1               console log tableFields item                label appendChild tableFields item               else               var field   tableRow insertCell -1               field innerHTML   item innerHTML                       counter               console log    var insertHere   document getElementById  writeroot       window onload   function        document getElementById   moreLabor    onclick   function    moreLabor          moreLabor         lt  script gt    lt div id  readroot  style  display  none  gt   lt tr gt       lt td gt  lt label for  hours  gt Hours  lt  label gt  lt  td gt       lt td gt  lt input type  text  name  hours    value      gt  lt  td gt   lt  tr gt   lt tr gt       lt td gt  lt label for  rate  gt Rate  lt  label gt  lt  td gt       lt td gt  lt input type  text  name  rate    value  25    gt  lt  td gt   lt  tr gt   lt tr gt       lt td gt  lt label for  description  gt Description  lt  label gt  lt  td gt       lt td gt  lt input type  text  name  description    value      gt  lt  td gt   lt  tr gt    lt input type  hidden  name  invoice number  value     this- gt number      gt   lt tr gt       lt td gt  lt input type  button  value  Remove      onclick  this parentNode parentNode removeChild this parentNode      gt  lt  td gt   lt  tr gt    lt  div gt    lt form method  POST  class  invoice  id  edit  gt   lt table id  editTable  gt       lt tr gt           lt td gt  lt label gt Work Order Number  lt  label gt  lt  td gt           lt td gt  lt input type  text  name  number  value     this- gt number     gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt label gt Customer  lt  label gt  lt  td gt           lt td gt  lt select name  customerid  gt    select   lt  select gt  lt  td gt       lt  tr gt       lt span id  writeroot  gt  lt  span gt        lt tr gt           lt td gt  lt input type  button  id  moreLabor  value  Add labor   gt  lt  td gt           lt td gt  lt input type  submit  name  Save  value  Save    gt  lt  td gt       lt  tr gt        if   is null  this- gt id              form      lt input type  hidden  name  id  value     this- gt id     gt               form      lt  table gt  lt  form gt            this- gt component  form

User · Answer

The backwards compatible version  IE9   is  var parent   document querySelector selector   Array prototype forEach call parent children  function child  index        Do stuff       The es6 way is  const parent   document querySelector selector   Array from parent children  forEach  child  index    gt         Do stuff

User · Answer

The trick is that the DOM Element children attribute is not an array but an array-like collection which has length and can be indexed like an array  but it is not an array   var children   tableFields children  for  var i   0  i  lt  children length  i        var tableChild   children i        Do stuff     Incidentally  in general it is a better practice to iterate over an array using a basic for-loop instead of a for-in-loop

User · Answer

In the year 2020   2021 it is even easier with Array from to  convert  from a array-like nodes to an actual array  and then using  map to loop through the resulting array  The code is as simple as the follows  Array from tableFields children  map  child   gt console log child

User · Answer

I   m surprised no-one answered with this code  for var child elt firstChild      child      child child nextSibling     do thing child      Or  if you only want children which are elements  this code  for var child elt firstElementChild      child      child child nextElementSibling     do thing child

User · Answer

if tableFields is an array   you can loop through elements as  following    for  item in tableFields          console log tableFields item        by the way i saw a logical error in you r code just remove   from end of for loop  right here      for  item in tableFields        this will cause you r loop to do just nothing and the following line will be executed only once       Do stuff

User · Answer

In ECS6  one may use Array from     const listItems   document querySelector  ul   children  const listArray   Array from listItems   listArray forEach  item    gt   console log item

[javascript] How do I loop through children objects in javascript?

Examples related to javascript