JS does not display the result | Python | Eel

I cannot solve the problem. I wrote a program, here is its short description: An application whose logic is written in python and the interface is rendered using HTML and CSS. Python imported module eel. Python has a function that returns an array. In JS, a variable is created that takes the result of the function, and then the result is written to the HTML classes. This is how it looks:

• Python code

   import eel
   import datetime
   import sys
  
  
   eel.init("web")
  
   isoWD = datetime.datetime.today().isoweekday()
  
   @eel.expose
   def some_func():
       if isoWD == 1:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 2:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 3:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 4:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 5:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 6:
           result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']
  
       elif isoWD == 7:
           sys.exit()
  
       return result
  
  
   eel.start("main.html", size=(325, 450))
  

• HTML code

function display() {
  var res = eel.some_func();
  for (var i = 0; i <= 'block__les'.length; i++) {
    document.getElementsByClassName('block__les')[i].innerHTML = res[i];
  }
}
display();

<div class="wrapper">
  <div class="block">
    <div class="block__num">
      <p>(1)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">09.00 - 09.30</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(2)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">09.40 - 10.10</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(3)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">10.20 - 10.50</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(4)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">11.00 - 11.30</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(5)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">11.40 - 12.10</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(6)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">12.20 - 12.50</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(7)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">13.00 - 13.30</div>
  </div>
  <div class="block">
    <div class="block__num">
      <p>(8)</p>
    </div>
    <div class="block__les"></div>
    <div class="block__time">13.40 - 14.10</div>
  </div>
</div>

Output:

Array elements should be output between numbers and time. But it's empty there.

In order to get the results sent from the python function exposed to eel, the javascript function, display, should become async function and we should await the results come from the python function.

Therefore, the display function becomes:

<script type="text/javascript">
async function display() {
  var res=await eel.some_func()();
  for (var i = 0; i <= document.getElementsByClassName('block__les').length ; i++) {
    document.getElementsByClassName('block__les')[i].innerHTML = res[i];
  }
}
display();
</script>

Another thing should be mentioned, but it is not related to eel, in the display function, 'block__les'.length does not give the number of items of class 'block__les', but it gives the number of characters of the word block__les, which is 10.

and in order the number of items of class 'block__les', we could use document.getElementsByClassName('block__les').length,which gives 8, the correct number.

of course, do not forget to put

<script type="text/javascript" src="/eel.js"></script>

in the head section of the main.html

Finnaly do not forget to change:

result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']

to become 8 items to match the number of the diplayed items in the HTML.

result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems', 'elems', 'elems']