Black Lives Matter. Please consider donating to Black Girls Code today.

TypeError: Cannot read property '0' of undefined

I am rendering a datatable which is returned by a function call 'top_leads' that invokes a python script.

Here’s my code:

layout = html.Div([
    
    html.Div([

        dash_table.DataTable(
            id='tenant-table',
            page_size = 6,
            sort_action='native',
            row_selectable='multi',
            filter_action='native',
            row_deletable=True,
            editable=True
        ),
    ], style={'display': 'inline-block', 'width': '80%', 'float': 'left', 'margin-top': '14em'})
    
    
])



Callback: 


@app.callback([Output('tenant-table', 'data'),
               Output('tenant-table', 'columns')],
              [
                  Input("company-select", "value"),
                  Input("market-select", "value")
              ],
             )
def render_table(company, market):
    
    # Lookup Properties based on selections - Landlord and market. 
    
    result = top_leads(company, market) 
    
    columns = [{"name": i, "id": i} for i in result.columns]
    
    data = result.to_dict('records')
    
    return (data, columns)

This seems to be a JS/React.js error, however, I wanted to see if anyone has had to deal with this or have any workarounds.

Screenshot 2020-04-24 at 2.46.16 PM

Dash fires all callbacks on launch. I suspect the problem is assoc. with not having input validation checks at the start of your callback. Ensure company and market have valid values before continuing, if not, return no_update, no_update.

To use no_update, include from dash.dash import no_update in your app.

Company and market arguments as passed as input by the user, and the datatable is updated based on them.

I tried to set default values and removed the default values with a conditioned the return statement : no_update. It didn’t seem to work. Not sure if I am doing it correctly, code below.

@app.callback([Output('tenant-table', 'data'),
               Output('tenant-table', 'columns')],
              [
                  Input("company-select", "value"),
                  Input("market-select", "value")
              ],
             )
def render_table(company, market):
    
    # Lookup Properties based on selections - Landlord and market. 
    
    if company is not None:
    
        result = top_leads(company, market) 
    
        columns = [{"name": i, "id": i} for i in result.columns]
    
        data = result.to_dict('records')
        
        return (data, columns)
    
    else:
        
        return (no_update, no_update)

add the following at the start of the callback to see what the values are at startup. You check company but not market. Even though the args are passed as inputs by the user, this is not true when the app starts.

print(f'company = {company} | market = {market}')

Upon debugging, company and market are empty first. and then take on values as I select them from dropdowns.

Here’s what it looks like:

company = | market = 

company = ABC | market = 

company = ABC | market = San Francisco

I am guessing when they’re empty, returning no_update should fix this?

correct…you can also have top_leads do the error checking and return no_update accordingly (i.e. if you return None, or somethign else)…more than one way to do this - depends on what works best for you.

Right. That’s what I am attempting to do here with a conditioned function call and return statement. top_leads is only called when company & market are selected. However, it still isn’t rendering and throwing the error at launch.

def render_table(company, market):
    
    print(f'company = {company} | market = {market}')
    
    if None not in (company, market): 
        
        result = top_leads(company, market) 
    
        columns = [{"name": i, "id": i} for i in result.columns]
    
        data = result.to_dict('records')
        
        return (data, columns)
    
    else: 
        
        return (no_update, no_update)

company and market appear to be empty vice None

So, I tried a few things to resolve this, and even after input validation checks and return(no_update, no_update), I still get - cannot read property '0' of undefined error.

Additionally, I am also getting this error.

Screenshot 2020-04-27 at 9.13.45 PM

results is pandas dataframe that is being returned by function top_leads. It seems like this needs to be a list or a tuple?

Callback code:

@app.callback([Output('table', 'data'),
               Output('table', 'columns')],
              [
                  Input("company-select", "value"),
                  Input("market-select", "value")
              ],
             )
def render_table(company, market):

    print(f'company = {company} | market = {market}')

    if company == '' and market == '':

        print('no selection')

        return (no_update, no_update)

    else:

        result = top_leads(company, market)

        columns = [{"name": i, "id": i} for i in result.columns]

        data = result.to_dict('records')

        return (data, columns)