'Dynamically generate a html.Div based on contents and length of a dict

Sample dictionary:

d =  [
      {
        "val": 3013,
        "id": 2
      },
      {
        "val": 4493,
        "id": 1
      },
      {
        "val": 3433,
        "id": 0
      },
      {
        "val": 4021,
        "id": 1
      }
     ]


import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc 

layout = html.Div([

                    html.Div(id="call"),

                    html.Div(id="dummy-div")

                 ])

@app.callback(Output("call","children"),
             [
               Input("dummy-div","value")

             ]
             )
def cfunc(dummy):

    l0 = []
    l1 = []
    l2 = []
    l3 = []

    for i in len(d):

        # Check id and calc. Avg. rent
        if i['id'] == 0:
           l0.append(i)

        if i['id'] == 1:
           l1.append(i)

        if i['id'] == 2:
           l2.append(i)

        if i['id'] == 3:
           l3.append(i)

        if len(l0) > 0:
           r0 = int(sum(p['val'] for p in l0))/len(l0)

           # Generate dbc.Label
           dbc.Label("Val0"),
           dbc.Label(r0),
           html.Br()

        elif len(l1) > 0:
            r1 = int(sum(p['val'] for p in l1))/len(l1)

            # Generate dbc.Label
            dbc.Label("Val1"),
            dbc.Label(r1),
            html.Br()

        elif len(l2) > 0:
            r2 = int(sum(p['val'] for p in l2))/len(l2)

            # Generate dbc.Label
            dbc.Label("Val2"),
            dbc.Label(r2),
            html.Br()

        elif len(l3) > 0:
            r3 = int(sum(p['val'] for p in l3))/len(l3)

            # Generate dbc.Label
            dbc.Label("Val3"),
            dbc.Label(r3),
            html.Br()
       
    return # html.Div with all the dbc.Labels here

    # Example

    html.Div([

                dbc.Label("Val0"),
                dbc.Label(r0),
                html.Br(),

                dbc.Label("Val1"),
                dbc.Label(r1),
                html.Br()

                dbc.Label("Val2"),
                dbc.Label(r2),
                html.Br()

    ])
                

How do I dynamically create an html.Div with dbc.Label based on length on the length and content of the dict? The length and content of l will vary, so need a scalable solution.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source