Creating a table using Pynecone (Custom table)

 

I primarily use MongoDB as my database, which, as you know, stores data in complex structures in JSON format. So, I came up with a function that can parse such complex JSON structures and create a table using Pynecone, making it easier for anyone to convert the data into a table.

This function automatically handles the complexity of the JSON structure, which is advantageous as you don't need to worry about it. I created this function out of my own necessity, but I thought it would be useful for others as well.

 

728x90

Please note that I am not a web developer; I am a data engineer. So, please refrain from harshly criticizing the function if it deviates from standard practices.

Here is an example of the data format I tested with. When testing, I made sure to use the most complex data structure possible.

 

    data = [
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
        ]

 

If you view the data using pandas, it would look like the following. I have created a complex structure with nested JSON within JSON.

 

 

result sample table

sample gif

 

The desired table structure you mentioned is as follows: When a row contains JSON data, it will be displayed using an accordion to show the data.

 

 

For example, when you click on 'd', the hidden data will be displayed as follows.

 

 

Additionally, if there is JSON data within a row, it will be grouped and processed using accordions.
For example, when you click on 'z' within 'd', the hidden data within 'z' will be displayed.

 

 

let's proceed with explaining the function.

 

반응형

def sample006() : 
    def json_to_pynecone_format( data ) : 
        result = {}
        result['header'] = {}
        result['value'] = []
        
        for row in data : 
            tmp_header:list = list(data[0].keys())
            tmp_value:list  = []

            for key in tmp_header:
                if key in list(row.keys()):
                    if type(row[key]) in [str, int, float] : 
                        tmp_value.append( row[key] )
                    else : 
                        if type(row[key]) == list : 
                            tmp_value.insert( len(tmp_value), pc.accordion(items=[ (key, json_to_pynecone_format(row[key]) ) ] ) )
                        elif type(row[key]) == dict : 
                            tmp_value.insert( len(tmp_value), pc.accordion(items=[ (key, json_to_pynecone_format( [row[key]] ) ) ] ) )
                else : 
                    pass
                    
            
            result['header'] = tmp_header
            result['value'].append( tmp_value ) 

        return  pc.table( headers= result['header'], rows= result['value'] ) 


    data = [
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
        ]
    return json_to_pynecone_format( data )

 

The function utilizes recursion. When encountering a JSON, it recursively calls itself. This design allows for nested tables within a table. The function also uses conditional statements (if statements) to handle types other than strings, integers, and floats by calling itself recursively.

If you want to use the function to populate data using a pandas DataFrame, you can use data.to_dict('records') to convert the DataFrame into a suitable format for the function.

 

import pandas as pd

data = [
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
            {'a' : 1, 'b' : 2, 'c' : 3, 'd' : [{'e' : 4, 'f' : 5, 'z' : {'a' : 1}},{'e' : 4, 'f' : 5, 'z' : {'a' : 1}}], 'g' : {'h' : 6, 'i' : 7} },
        ]

data = pd.DataFrame( data )

data.to_dict('recode')