Dash.exceptions.InvalidCallbackReturnValue: The callback for `<Output `page-content.children returned a tree with one value having type `set` which is not JSON serializable

Dash Python
1

Hi, I am trying to build a screen by passing a tuple of ‘spans’ by parameters :

how can I pass a list of spans and add them to the children element?

layout = html.Div(children=[
   html.Div(children=[
       Header(app)
   ]),
   get_ibox(ibox_title="Settings", ibox_content={get_boolean_switch(
       id="bs-is-twikey-production",
       label="is production?",
       on=False),

       get_label_input(
       id="i-twikey-token",
       label="Twikey token",
       maxLength=13,
       minLength=13,
       placeholder='Twikey Token  e.g. 1234567890123',
       type='text',
       value="",
   )})
],
   className="row")

get_label_input function

def get_label_input(
        id=randomString(),
        label="Normal",
        maxLength=10,
        minLength=10,
        placeholder="Enter a value...",
        type="text",
        value=""
):
    return html.Span([html.Div(children=[
        html.Label(
            label,
            className="col-sm-2 col-form-label"
        ),
        html.Div(children=[
            dcc.Input(
                className="form-control",
                id=id,
                maxLength=maxLength,
                minLength=minLength,
                placeholder=placeholder,
                type=type,
                value=value,
            ),

        ], className="col-sm-10")

    ], className="form-group row"
    ),
        html.Div(children=[
        ], className="hr-line-dashed"
    )
    ]
    )

get_ibox function :

def get_ibox(ibox_title="A great title", ibox_content=None):
    return html.Div(children=[
        html.Div(children=[
            html.Div(children=[
                html.Div(children=[
                    html.H5(children=[ibox_title]
                            ),

                ], className="ibox-title"
                ),
                html.Div(id='ibox-spans', children=[
                    {k} for k in ibox_content
                ],
                    className='ibox-content',
                ),
            ],
                className="ibox"),
        ],
            className="col-lg-12"),
    ],
        className="row")

get_boolean_switch

def get_boolean_switch(id=randomString, label="a switch", on=False):
    return html.Span([html.Div(children=[
        html.Label(
            label,
            className="col-sm-2 col-form-label"
        ),
        html.Div(children=[
            daq.BooleanSwitch(
                id=id,
                # label='is production?',
                on=False
            ),
            html.Label(children=[
                html.Span(
                    children=[],
                    id='boolean-switch-output',
                    className='label-body',
                ),
            ]
            )
        ], className="col-sm-2")

    ], className="form-group row"
    ),
        html.Div(children=[
        ], className="hr-line-dashed"
    )
    ]
    )

dash.exceptions.InvalidCallbackReturnValue:
The callback for <Output page-content.children>
returned a tree with one value having type set
which is not JSON serializable.

The value in question is located at
[*] Div
[1] Div
[0] Div
[0] Div
[1] Div (id=ibox-spans)
[0] set

and has string representation
{Span([Div(children=[Label(children='is production?', className='col-sm-2 col-form-label'), Div(children=[BooleanSwitch(id='bs-is-twikey-production', on=False), Label([Span(children=[], id='boolean-switch-output', className='label-body')])], className='col-sm-2')], className='form-group row'), Div(children=[], className='hr-line-dashed')])}

In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.
Traceback (most recent call last)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1328, in add_context

response, cls=plotly.utils.PlotlyJSONEncoder

File "C:\App\Miniconda2\envs\py37\lib\json\__init__.py", line 238, in dumps

**kw).encode(obj)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\_plotly_utils\utils.py", line 44, in encode

encoded_o = super(PlotlyJSONEncoder, self).encode(o)

File "C:\App\Miniconda2\envs\py37\lib\json\encoder.py", line 199, in encode

chunks = self.iterencode(o, _one_shot=True)

File "C:\App\Miniconda2\envs\py37\lib\json\encoder.py", line 257, in iterencode

return _iterencode(o, 0)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\_plotly_utils\utils.py", line 113, in default

return _json.JSONEncoder.default(self, obj)

File "C:\App\Miniconda2\envs\py37\lib\json\encoder.py", line 179, in default

raise TypeError(f'Object of type {o.__class__.__name__} '

During handling of the above exception, another exception occurred:
File "C:\App\Miniconda2\envs\py37\lib\site-packages\flask\app.py", line 1813, in full_dispatch_request

rv = self.dispatch_request()

File "C:\App\Miniconda2\envs\py37\lib\site-packages\flask\app.py", line 1799, in dispatch_request

return self.view_functions[rule.endpoint](**req.view_args)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1404, in dispatch

response.set_data(self.callback_map[output]["callback"](*args))

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1331, in add_context

self._validate_callback_output(output_value, output)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1187, in _validate_callback_output

_validate_value(output_value)

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1144, in _validate_value

bad_val=j, outer_val=val, path=p, index=index

File "C:\App\Miniconda2\envs\py37\lib\site-packages\dash\dash.py", line 1125, in _raise_invalid

bad_val=bad_val,

dash.exceptions.InvalidCallbackReturnValue: 
The callback for `<Output `page-content.children`>`
returned a tree with one value having type `set`
which is not JSON serializable.

The value in question is located at
[*] Div 
[1] Div 
[0] Div 
[0] Div 
[1] Div (id=ibox-spans)
[0] set 

and has string representation
`{Span([Div(children=[Label(children='is production?', className='col-sm-2 col-form-label'), Div(children=[BooleanSwitch(id='bs-is-twikey-production', on=False), Label([Span(children=[], id='boolean-switch-output', className='label-body')])], className='col-sm-2')], className='form-group row'), Div(children=[], className='hr-line-dashed')])}`

In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.
1 Like