JS does not display the result | Python | Eel

Question

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:

Output img

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

You should use `await eel.some_func()()` and make the `display` function async — rafalou38, Jan 07 '21 at 20:23
@mplungjan eel works like that to call a server function it’s not a duplicate — rafalou38, Jan 07 '21 at 20:26

Nour-Allah Hussein · Accepted Answer · 2021-01-20T18:40:58.553

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']

JS does not display the result | Python | Eel

1 Answers1