How do I return dataframe dict to DataTable?

Dash Python
1

I have the following code:

[BBCode]

import pandas as pd
import numpy as np
import datetime as dt
import requests
import dash_auth
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, dash_table, callback, Input, Output, State
from dash.exceptions import PreventUpdate

df = pd.DataFrame()


# This function retrieves all the available stock exchanges on EOD website
# and returns the all available exchanges in a dataframe
def get_exchanges():
    exchanges_url = 'https://eodhd.com/api/exchanges-list/?api_token=secret_key&fmt=json'

try:
    request_exchanges = requests.request('GET', exchanges_url)
except:
    print(request_exchanges.status_code)

    exchanges_list = request_exchanges.json()
    exchanges_data = []

for exchanges in exchanges_list:
    view_data = [exchanges['Name'], exchanges['Code']]
    exchanges_data.append(view_data)

    exchanges_data = pd.DataFrame(exchanges_data, columns=['Country', 'Code'])
    exchanges_data.set_index('Country', inplace=True)

   return exchanges_data


def get_exchange_list(exchanges_dataframe):
    exchanges_list = exchanges_dataframe.index.to_list()

    return exchanges_list


# This function retrieves the stock exchange code
def get_exchange_code(exchanges_dataframe, exchange_name):
    exchange_code = exchanges_dataframe.loc[exchange_name].values[0]

    return exchange_code


def get_available_tickers(exchange_codename):
    tickers_url = 'https://eodhd.com/api/exchange-symbol-list/' + exchange_codename + '? 
   api_token=secret_key&fmt=json'

    try:
        request_tickers = requests.request('GET', tickers_url)
    except:
        print(request_tickers.status_code)

    tickers_list = request_tickers.json()
    tickers_data = []

    for tickers in tickers_list:
        view_tickers = [tickers['Name'], tickers['Code']]
        tickers_data.append(view_tickers)

    for i in range(len(tickers_data)):
        for j in range(len(tickers_data[i])):
            tickers_data[i][0] = tickers_data[i][0].upper()

    tickers_data = pd.DataFrame(tickers_data, columns=['Name', 'Code'])
    tickers_data.set_index('Name', inplace=True)

    return tickers_data


def get_tickers_list(tickers_dataframe):
    tickers_list = tickers_dataframe.index.to_list()

return tickers_list


def get_ticker_code(tickers_dataframe, ticker_name):
    ticker_code = tickers_dataframe.loc[ticker_name].values[0]

return ticker_code


def get_live_data(ticker_codename, exchange_codename):
    ticker_exchange_codenames = ticker_codename + '.' + exchange_codename

    data_url = 'https://eodhd.com/api/real-time/' + ticker_exchange_codenames + '? 
   api_token=secret_key&fmt=json'

data = requests.request('GET', data_url)
data_list = data.json()

return data_list


VALID_USERNAME_PASSWORD_PAIRS = {
    'count': 'cristo'
}

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

exchanges_df = get_exchanges()
list_of_exchanges = get_exchange_list(exchanges_df)

choose_exchange_title = dbc.Label('Choose Exchange',
                              style={'color': 'blue', 'font-weight': 'bold', 'font-size': '20px'})
exchanges_drop_down = dcc.Dropdown(
    list_of_exchanges,
    id='exchange_dd'
)
search_company = dbc.Label('Search for Company',
                       style={'color': 'blue', 'font-weight': 'bold', 'font-size': '20px'})
input_search = dcc.Input(id='input_id', type='text', placeholder='Company Name', 
debounce=True)
output_place = html.P(id='output_id')

main_layout = dbc.Row([
    dbc.Col([
        dbc.Row(choose_exchange_title),
        # html.Br(),
        dbc.Row(exchanges_drop_down),
        html.Br(),
        dbc.Row(search_company),
        # html.Br(),
        dbc.Row(input_search),
        html.Br(),
        dbc.Row(output_place)
    ], align='start'),
    dbc.Col([
        dbc.Row(html.P(id='p_id')),
        #        dbc.Row(html.H1('Table'))
    ], align='end')
])

all_layout = html.Div([
    main_layout
])

app.layout = dbc.Container(
    all_layout
)


@app.callback(
    Output('output_id', 'children'),
    [
        Input('exchange_dd', 'value'),
        Input('input_id', 'value')
    ]
)
def update_exchanges(exchange_value, user_input):
    if not exchange_value:
        raise PreventUpdate
    else:
        exchange_code = get_exchange_code(exchanges_df, exchange_value)
        tickers_df = get_available_tickers(exchange_code)
        list_of_tickers = get_tickers_list(tickers_df)
        list_of_tickers_df = pd.DataFrame(list_of_tickers)
        input_of_user = str(user_input)
        input_of_user = input_of_user.upper()
        df = list_of_tickers_df[list_of_tickers_df[0].str.contains(input_of_user)]

        return dash_table.DataTable(df.to_dict('records'), style_cell={'textAlign': 'left'}, 
 id='companies_id')


@app.callback(
    Output('p_id', 'children'),
    Input('output_id', 'active_cell')
) 
def print_data(active_cell):
    if not active_cell:
         raise PreventUpdate
    else:
         data_row = active_cell['row']
         data_col_id = active_cell['column_id']
         cell_value = df.loc[data_row, data_col_id]

    return cell_value


if __name__ == "__main__":
    app.run(debug=True)

[/BBCode]

The following actions happen when I run the code:

  1. I get a dropdown menu with the available stock exchanges from the API
  2. Next I choose one of the exchanges
  3. I type in a ticker in the input box (ex. bitcoin)
  4. a datatable appears with all of the available tickers that has bitcoin string in them.
    Till here everything is working fine.

I want to choose a value from the datatable and output this value in a paragraph. As you can see in the code that I return a datatable to the HTML Paragraph. At this point the datatable doesn’t have an ID so I can select this ID to get the selected value in the datatable.

How can I return a datatable and then select a value from that table and output the value in an HTML paragraph?

2

Hi @mahmoud899

Here’s a minimal example to get you started.

Note that the table gets returned to the children property of the html.P component. Then the callback with the active celll uses the table id as the Input.

from dash import Dash, html, Input, Output, callback, dash_table
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv('https://git.io/Juf1t')

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

app.layout = dbc.Container([
    html.Button("refresh", id="refresh"),
    dbc.Label('Click a cell in the table:'),
    html.P(id='table-container'),
    dbc.Alert(id='tbl_out'),
])



@callback(Output('table-container', 'children'), Input('refresh', 'n_clicks'))
def update_graphs(_):
    return dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns], sort_action="native", id='tbl'),


@callback(Output('tbl_out', 'children'), Input('tbl', 'active_cell'))
def update_graphs(active_cell):
    return str(active_cell) if active_cell else "Click the table"

if __name__ == "__main__":
    app.run(debug=True)