How to control the number of html Div to display?

Dash Python
1

Hi,

Seems like the original question is a bit confusing so I’ve re-worded my question. Thank you for your time.

I have a list with unknown length (could be anywhere from 0-5 items), and I want to create html Div based on the length of the list.

Updated below code, here I’m using a list of len 5 as an example, in practice the list can be any length.

Because I know the len is 5, so I “hard-coded” html.Div 5 times in the app.layout. Is there a way to create those html.Div iteratively vs. typing out the same code 5 times?

Also, in practice the length of the list li will be unknown (anywhere from 0-5 elements), so what’s the best way to code the html.Div if I don’t know how many items there are in advance?

li = [0,1,2,3,4]
app = dash.Dash(__name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}],)

app.layout = html.Div([
                         html.Div(children=li[0], className='card'),
                         html.Div(children=li[1], className='card'),
                         html.Div(children=li[2], className='card'),
                         html.Div(children=li[3], className='card'),
                         html.Div(children=li[4], className='card'),
])

Thanks!
Jay

2

Hi @iwannasee

Is not clear to me your question. What do you mean that html.Div is kind of “hard-coded” and the iteration ? :thinking:

Could you explain a little bit about the problem you are facing ?

Thanks.

3

Sorry if the original question was confusing. i’ve re-worded it and included a simple code example. Thank you!

4

Hey @iwannasee

Just use a loop in the callback to do that, supose the input of the callback is the list, and you name it as my_list, and the output is a ‘children’ of a Div with id=‘my_output’:

@app.callback(Output('my_output', 'children'),
              Input('my_list', 'value'))
def bilding_divs('mylist'):
     divs = []
     for i in range(len(mylist)):
           each_row = eval("html.Div(children=li["+str(i)+"], className='card')")
           divs.append(each_row)

     print(divs)

     return divs

I think something like this should work.

I’m not shure if the output will be as expected, but if not made the apropriate changes, see in the prompt if the output printed is what you need.

5

Wow I didn’t know you can pass the html.Div in like a string! I will definitely try that tonight. Thank you very much!

6

Hi,

I have tested this approach, unfortunately it didn’t work as the list of strings “html.Div()…” got returned to the page instead of the actual html component.
Any suggestion?

Thanks!

7

Hey @iwannasee

Add eval() to each string.

I just change my code to:

each_row = eval("html.Div(children=li["+str(i)+"], className='card')")
8

I would advise against using eval. In particular since it doesn’t seem to be necessary. Couldn’t you just construct the divs in the loop?

9

Adding eval() definitely works! I’ve never used eval() before but I can see this simple function being useful in many cases. Thank you!

10

I agree, I was able to construct the html.Div in the loop and return a list of Divs. Thank you!

11

I also think is not necessary but I try my first example and couldn’t remove the “ “ symbols, could you share the loop code?

12

Posting updated code here without eval() and strings.
The li = [0,1,2,3,4] is an input that will have the id =‘my_list’. I got lazy and didn’t do it properly in this example, but hopefully you get the idea :slight_smile:

li = [0,1,2,3,4]
app = dash.Dash(__name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}],)

app.layout = html.Div(id='my_output')


@app.callback(Output('my_output', 'children'),
              Input('my_list', 'value'))
def building_divs(mylist):
     divs = []
     for i in mylist:
         divs.append(html.Div(children = i, className='card'))
     return divs
13

Thanks. :grinning:

I’m an Accountant :woozy_face:

But very good with copy and paste :joy:

14

It doesn’t matter what your profession is, what matters is that you can code :smiley:
I’m not a programmer by profession but I use coding a lot to make my daily work much easier :slightly_smiling_face:

1 Like
15

Yes thanks.

I also use it for improving my own interest. Here you can find my page: https://companyanalysis.herokuapp.com/

16

This is serious stuff, lots of information! Coincidentally, the website I’m building is also about the stock market! It’s still in development stage right now otherwise I’d love to share here.

I noticed your website takes a long time to load info once a new ticker is entered. I’m guessing it’s querying off of the internet on the fly for a lot of the info?

1 Like
17

Yes, more than 50 callbacks searching info from different web pages, also to build the SEC reports it has to make a lot of code to find all the Company’s 10Q and 10K with all their anexes from the last year.
But finally it takes the shape I was dreaming. And to tell you the true: much more better than my best expectation.
Dash, Python, Pandas, Requests and others things are really unbelievable tools. :smiley: