Create a ul and fill it based on a passed array

Question

I ve managed to generate a series of list-items based on one specified array within a matrix  i e  an array within an array    I would like to be able to pass a variable  representing an array  to a function so that it can spit out an unordered list filled with list-items based on the array passed into it   Problems    The function only works with one array at a time It also produces commas in the markup  presumably  because it s converting the array to a string    The solution needs to    assume that the unordered list does not exist in the DOM be able to accept different arrays passed into it  options 0   options 1   etc   generate the list-items without commas   JavaScript   var options             set0     Option 1   Option 2            set1     First Option   Second Option   Third Option          function makeUL        var a     lt ul gt            b     lt  ul gt            m               Right now  this loop only works with one        explicitly specified array  options 0  aka  set0       for  i   0  i  lt  options 0  length  i    1           m i      lt li gt     options 0  i      lt  li gt               document getElementById  foo   innerHTML   a   m   b        My goal is to be able to pass a variable    here to utilize this function with different arrays makeUL      jsFiddle

User · Answer

What are disadvantages of the following solution  Seems to be faster and shorter   var options         set0    Option 1   Option 2        set1    First Option   Second Option   Third Option       var list     lt li gt     options set0 join   lt  li gt  lt li gt        lt  li gt    document getElementById  list   innerHTML   list

User · Answer

First of all  don t create HTML elements by string concatenation  Use DOM manipulation  It s faster  cleaner  and less error-prone  This alone solves one of your problems  Then  just let it accept any array as an argument   var options             set0     Option 1   Option 2            set1     First Option   Second Option   Third Option           function makeUL array           Create the list element      var list   document createElement  ul         for  var i   0  i  lt  array length  i                 Create the list item          var item   document createElement  li                Set its contents          item appendChild document createTextNode array i                 Add it to the list          list appendChild item                 Finally  return the constructed list      return list        Add the contents of options 0  to  foo  document getElementById  foo   appendChild makeUL options 0       Here s a demo  You might also want to note that set0 and set1 are leaking into the global scope  if you meant to create a sort of associative array  you should use an object   var options         set0    Option 1    Option 2        set1    First Option    Second Option    Third Option        And access them like so   makeUL options set0

User · Answer

You may also consider the following solution   let sum   options set0 concat options set1   const codeHTML     lt ol gt     sum reduce  html  item    gt        return html     lt li gt     item     lt  li gt                       lt  ol gt    document querySelector   list   innerHTML   codeHTML

[javascript] Create a <ul> and fill it based on a passed array

Examples related to javascript

Examples related to arrays