I have a DataTable of cumulative ingredients added to a recipe:
DataTable( # ingredient, amt, units
id='cumulative-ingredients',
data=[],
columns = [{'name': 'Ingredient', 'id': 'Ingredient'},
{'name': 'Amount', 'id': 'Amount'},
{'name': 'Units', 'id': 'Units'}],
editable=True
),
I was following the example to add rows here using a button:
https://dash.plotly.com/datatable/editable
I wrote a callback:
@app.callback(
[Output('cumulative-ingredients', 'data')],
[Input('add-ingredient', 'n_clicks')],
[State('cumulative-ingredients', 'data'),
State('cumulative-ingredients', 'columns'),
State('search-ingredient', 'value'),
State("numerical-amount", "value"),
State('units-dropdown', 'value')],
)
def update_cumul_ingredients_table(n_clicks, table_rows, table_cols, ingredient, amt, units):
"""
add row to cumulative ingredients for n_clicks of add ingredient
"""
if n_clicks <= 0:
return no_update
table_rows.append({'Ingredient': str(ingredient),
'Amount': str(amt),
'Units': str(units)
})
return table_rows
When I trigger it by clicking my “add-ingredient” button that lookds like:
html.Button(
"Add Ingredient", id='add-ingredient', n_clicks=0
),
I get this error:
TypeError: n.slice is not a function
yp viewport.ts:12
yp viewport.ts:24
a memoizer.ts:7
controlledPropsHelper controlledPropsHelper.ts:19
value index.tsx:79
Ie react-dom@16.v1_8_2m1602973425.13.0.min.js:104
rh react-dom@16.v1_8_2m1602973425.13.0.min.js:103
zj react-dom@16.v1_8_2m1602973425.13.0.min.js:228
react-dom@16.v1_8_2m1602973425.13.0.min.js:125:24
The entire message is this:
TypeError: n.slice is not a function
yp viewport.ts:12
yp viewport.ts:24
a memoizer.ts:7
controlledPropsHelper controlledPropsHelper.ts:19
value index.tsx:79
Ie react-dom@16.v1_8_2m1602973425.13.0.min.js:104
rh react-dom@16.v1_8_2m1602973425.13.0.min.js:103
zj react-dom@16.v1_8_2m1602973425.13.0.min.js:228
Th react-dom@16.v1_8_2m1602973425.13.0.min.js:152
tj react-dom@16.v1_8_2m1602973425.13.0.min.js:152
Te react-dom@16.v1_8_2m1602973425.13.0.min.js:146
Pg react-dom@16.v1_8_2m1602973425.13.0.min.js:61
unstable_runWithPriority react@16.v1_8_2m1602973425.13.0.min.js:25
Da react-dom@16.v1_8_2m1602973425.13.0.min.js:60
Pg react-dom@16.v1_8_2m1602973425.13.0.min.js:61
ha react-dom@16.v1_8_2m1602973425.13.0.min.js:60
Qh react-dom@16.v1_8_2m1602973425.13.0.min.js:147
notify dash_renderer.v1_8_2m1602973425.min.js:20
notifyNestedSubs dash_renderer.v1_8_2m1602973425.min.js:20
handleChangeWrapper dash_renderer.v1_8_2m1602973425.min.js:20
p dash_renderer.v1_8_2m1602973425.min.js:20
se dash_renderer.v1_8_2m1602973425.min.js:20
o dash_renderer.v1_8_2m1602973425.min.js:20
observer dash_renderer.v1_8_2m1602973425.min.js:20
ye dash_renderer.v1_8_2m1602973425.min.js:20
pe dash_renderer.v1_8_2m1602973425.min.js:20
t dash_renderer.v1_8_2m1602973425.min.js:20
observer dash_renderer.v1_8_2m1602973425.min.js:20
ye dash_renderer.v1_8_2m1602973425.min.js:20
pe dash_renderer.v1_8_2m1602973425.min.js:20
t dash_renderer.v1_8_2m1602973425.min.js:20
observer dash_renderer.v1_8_2m1602973425.min.js:20
notify dash_renderer.v1_8_2m1602973425.min.js:20
ye dash_renderer.v1_8_2m1602973425.min.js:20
pe dash_renderer.v1_8_2m1602973425.min.js:20
t dash_renderer.v1_8_2m1602973425.min.js:20
notify dash_renderer.v1_8_2m1602973425.min.js:20
p dash_renderer.v1_8_2m1602973425.min.js:20
se dash_renderer.v1_8_2m1602973425.min.js:20
e dash_renderer.v1_8_2m1602973425.min.js:20
tryCatch polyfill@7.v1_8_2m1602973425.8.7.min.js:1
invoke polyfill@7.v1_8_2m1602973425.8.7.min.js:1
n polyfill@7.v1_8_2m1602973425.8.7.min.js:1
Sa dash_renderer.v1_8_2m1602973425.min.js:20
a dash_renderer.v1_8_2m1602973425.min.js:20
dash_renderer.v1_8_2m1602973425.min.js:20:71441
Gn http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
B http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ao http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ao http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
value http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
callback http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:139
Wg http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:67
oj http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:127
Aj http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:160
unstable_runWithPriority http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react@16.v1_8_2m1602973425.13.0.min.js:25
Da http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:60
ab http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:154
Te http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:146
Pg http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:61
unstable_runWithPriority http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react@16.v1_8_2m1602973425.13.0.min.js:25
Da http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:60
Pg http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:61
ha http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:60
Qh http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/react-dom@16.v1_8_2m1602973425.13.0.min.js:147
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notifyNestedSubs http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
handleChangeWrapper http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
o http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
e http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
tryCatch http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
invoke http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
n http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
Sa http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
a http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
When I first run Pycharm debugger, it stops on my breakpoint on the return statement of the callback function. I am returning a list of one dictionary as the DataTable data. Screenshot, please look at table_rows
in the debugging console:
As soon as I press play green arrow from there on the debugger I get the error above.
The next and all subsequent attempts to press “Add Ingredient” results in the error below and the execution never reaches the return statement of the callback.
Object { message: "Callback error updating cumulative-ingredients.data", html: "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n <head>\n <title>AttributeError: 'dict' object has no attribute 'append' // Werkzeug Debugger</title>\n <link rel=\"stylesheet\" href=\"?__debugger__=yes&cmd=resource&f=style.css\"\n type=\"text/css\">\n <!-- We need to make sure this has a favicon so that the debugger does\n not by accident trigger a request to /favicon.ico which might\n change the application state. -->\n <link rel=\"shortcut icon\"\n href=\"?__debugger__=yes&cmd=resource&f=console.png\">\n <script src=\"?__debugger__=yes&cmd=resource&f=jquery.js\"></script>\n <script src=\"?__debugger__=yes&cmd=resource&f=debugger.js\"></script>\n <script type=\"text/javascript\">\n var TRACEBACK = 139864295136080,\n CONSOLE_MODE = false,\n EVALEX = true,\n EVALEX_TRUSTED = false,\n SECRET = \"njhRZfMlY0t1FipvGxkh\";\n </script>\n …" }
dash_renderer.v1_8_2m1602973425.min.js:20:71441
dict object has no append
is concerning but I’m using the DataTable data as a State “input” to my callback so that should be a list of dicts right?
There’s more to the error:
message: "Callback error updating cumulative-ingredients.data"
<prototype>: Object { … }
dash_renderer.v1_8_2m1602973425.min.js:20:71441
Gn http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
B http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ao http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ao http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
li http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
(Async: promise callback)
li http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
e http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
tryCatch http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
invoke http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
n http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
Sa http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
a http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
(Async: promise callback)
Sa http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
a http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
n http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
n http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
p http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
se http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
e http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
tryCatch http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
invoke http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
n http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/polyfill@7.v1_8_2m1602973425.8.7.min.js:1
za http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
a http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ga http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
Ga http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
observer http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
ye http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
pe http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
t http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.min.js:20
notify http://127.0.0.1:5000/dash/shiny/_dash-component-suites/dash_renderer/dash_renderer.v1_8_2m1602973425.mi
How can I fix this?
Can I not start with an empty DataTable and append rows to it? Do I need to have an empty row of empty strings to begin with to append?