javascript for-loop not iterating within python loop

December 1, 2022

I have a list of dates in python that I would like to iterate through to create button elements.

df2 = ['Sat Nov 12 11:57:21 CST 2022',
 'Wed Nov 23 18:13:31 CST 2022',
 'Wed Nov 23 18:13:32 CST 2022',
 'Thu Nov 10 19:07:50 CST 2022',
 'Fri Nov 11 09:54:54 CST 2022',
 'Fri Nov 11 10:18:36 CST 2022',
 'Sat Nov 26 10:50:05 CST 2022',
 'Sat Nov 12 11:57:50 CST 2022']

For some reason my javascript loop doesn’t iterate the value yet outside the js loop it is iterating the value

for count, value in enumerate(df2):
    counts = str(count)
    f.write(''' 
            <html>
               <head> 
                  <meta name="viewport" content="width=device-width, initial-scale=1"> 
               </head> 
               <body> 
                  <div id="myHTMLWrapper"> 
                  '''+value+'''
                  </div>
                  <script>
              var wrapper = document.getElementById("myHTMLWrapper");
              var myHTML = '';
              for (var i = 0; i < '''+counts+'''; i++) {
                myHTML += '<button class="test">'''+value+'''</button>';
              }/*  w w  w  . j av a  2  s. c o  m*/
              wrapper.innerHTML = myHTML

                  </script>  
               </body>
            </html>
            ''')

So the value variable in my div there is iterating fine. The buttons are also being generated but they have the last value of my list still…

>Solution :

If you’re dfoing the looping in Python, as you are doing here, then you don’t need to do any looping in Javascript. The HTML you create will already have all of the data enumerated:

df2 = ['Sat Nov 12 11:57:21 CST 2022',
 'Wed Nov 23 18:13:31 CST 2022',
 'Wed Nov 23 18:13:32 CST 2022',
 'Thu Nov 10 19:07:50 CST 2022',
 'Fri Nov 11 09:54:54 CST 2022',
 'Fri Nov 11 10:18:36 CST 2022',
 'Sat Nov 26 10:50:05 CST 2022',
 'Sat Nov 12 11:57:50 CST 2022']



f.write(''' 
        <html>
           <head> 
              <meta name="viewport" content="width=device-width, initial-scale=1"> 
           </head> 
           <body> 
''')

for count, value in enumerate(df2):
    f.write(''' 
              <div id="myHTMLWrapper"> '''+value+''' </div>
              '<button class="test">'''+value+'''</button>';
            ''')

f.write('''
   </body>
</html>
''')