How can I drop the [] and the '' in my Dash output?

Question

I like to have the output to be without [] and without ''. When nothing is selected, nothing should be displayed. If Some options are selected, then just the text, not the '' should be shown.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import time

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



app.layout = html.Div(children=[


    dcc.Checklist(id='my-checklist1',
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=[]
    ),
    html.Div(id='my-div-checklist1'),
    html.Hr(),



    dcc.Checklist(id='my-checklist2',
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=[],
    labelStyle={'display': 'inline-block'}
    ),
    html.Div(id='my-div-checklist2'),
    html.Hr(),


])



@app.callback(Output('my-div-checklist1', 'children'),
              [Input('my-checklist1', 'value'),
              Input('my-checklist2', 'value')
              ])

def prepare_data(categ1, categ2):
        return html.Div([dcc.Markdown(
                         '''{}, {}'''.format(categ1, categ2))])



if __name__ == '__main__':
    app.run_server(debug=True)

Current vs. Expected:

Start now: [], [] What I want: ``

After selection now: 'NYC', 'SF' What I want: NYC SF

See this: https://stackoverflow.com/questions/28666951/how-to-turn-a-list-tuple-into-a-space-separated-string-in-python-using-a-single?rq=1 — Aboorva Devarajan, Sep 11 '19 at 09:51

score 1 · Answer 1 · answered Sep 11 '19 at 09:47

1

One way to do it would be,

def prepare_data(categ1, categ2):
        return html.Div([dcc.Markdown(str(" ".join(categ1 )) + " " + str(" ".join(categ2)))])

answered Sep 11 '19 at 09:47

Aboorva Devarajan

1,517
10
23

score 0 · Answer 2 · answered Jul 01 '22 at 14:11

If you have only 2 values, I would do so using f strings:

def prepare_data(categ1: str, categ2: str):
    return html.Div([dcc.Markdown(f'{categ1}, {categ2}')])

If you have many more values, join them with commas:

N_INPUTS = 10  # Say you have 10 or so...

@app.callback(
    Output('my-div-checklist1', 'children'),
    [Input(f"my-checklist_{i}") for i in range(len(N_INPUTS))],
)
def prepare_data(*categories):
    return html.Div([dcc.Markdown(", ".join(categories))])

How can I drop the [] and the '' in my Dash output?

2 Answers2