N.slice is not a function error when trying to update DataTable

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&amp;cmd=resource&amp;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&amp;cmd=resource&amp;f=console.png\">\n    <script src=\"?__debugger__=yes&amp;cmd=resource&amp;f=jquery.js\"></script>\n    <script src=\"?__debugger__=yes&amp;cmd=resource&amp;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?

1 Like

Facing the same issue. Would appreciate a fix.

What I ended up doing was to just make a output a new data table from a dataframe saved in a hidden div each time I add a row. So I would get the jsonified dataframe from the hidden div, then add a row to the dataframe and send the data and columns to the DataTable.
Now just have to find a way to remove selected rows from the DataTable and update the dataframe in the hidden div and then output the truncated dataframe as data and columns to the DataTable.

If you are already getting the data as state, why not load the data as a pandas data frame and then append the new row to the data frame. Then return dataframe name .to_dict(‘records’)?

1 Like

I’ll implement this on ‘remove row’