\
**Category:** Dash Python\
**Created:** [March 15, 2021, 4:22am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008 "2021-03-15T04:22:49Z")\
**Posts on this page:** 17\
**Page:** 1
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 15, 2021, 4:22am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/1 "2021-03-15T04:22:49Z")
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?
```auto
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
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 15, 2021, 1:57pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/2 "2021-03-15T13:57:52Z")
Hi @iwannasee
Is not clear to me your question. What do you mean that html.Div is kind of “hard-coded” and the iteration ? 🤔
Could you explain a little bit about the problem you are facing ?
Thanks.
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 15, 2021, 6:41pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/3 "2021-03-15T18:41:43Z")
Sorry if the original question was confusing. i’ve re-worded it and included a simple code example. Thank you!
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 15, 2021, 7:15pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/4 "2021-03-15T19:15:18Z")
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’:
```auto
@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.
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 15, 2021, 8:09pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/5 "2021-03-15T20:09:21Z")
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!
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 2:31am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/6 "2021-03-16T02:31:05Z")
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!
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 16, 2021, 3:58am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/7 "2021-03-16T03:58:10Z")
Hey @iwannasee
Add eval() to each string.
I just change my code to:
```auto
each_row = eval("html.Div(children=li["+str(i)+"], className='card')")
```
---
**Author:**  [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [March 16, 2021, 6:22am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/8 "2021-03-16T06:22:15Z")
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?
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 11:31am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/9 "2021-03-16T11:31:40Z")
Adding eval() definitely works! I’ve never used eval() before but I can see this simple function being useful in many cases. Thank you!
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 11:35am UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/10 "2021-03-16T11:35:54Z")
I agree, I was able to construct the html.Div in the loop and return a list of Divs. Thank you!
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 16, 2021, 12:11pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/11 "2021-03-16T12:11:58Z")
I also think is not necessary but I try my first example and couldn’t remove the “ “ symbols, could you share the loop code?
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 1:31pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/12 "2021-03-16T13:31:47Z")
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 🙂
```auto
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
```
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 16, 2021, 2:38pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/13 "2021-03-16T14:38:39Z")
Thanks. 😀
I’m an Accountant 🥴
But very good with **copy and paste** 😂
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 4:19pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/14 "2021-03-16T16:19:39Z")
It doesn’t matter what your profession is, what matters is that you can code 😃
I’m not a programmer by profession but I use coding a lot to make my daily work much easier 🙂
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 16, 2021, 4:48pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/15 "2021-03-16T16:48:46Z")
Yes thanks.
I also use it for improving my own interest. Here you can find my page: [https://companyanalysis.herokuapp.com/](https://companyanalysis.herokuapp.com/)
---
**Author:**  [@iwannasee](https://community.plotly.com/u/iwannasee)\
**Post date:** [March 16, 2021, 5:12pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/16 "2021-03-16T17:12:40Z")
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?
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 16, 2021, 5:27pm UTC](https://community.plotly.com/t/how-to-control-the-number-of-html-div-to-display/51008/17 "2021-03-16T17:27:08Z")
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. 😃