{{announcement.body}}
{{announcement.title}}

Sending Pandas DataFrame as JSON to CoreUI/React template

DZone 's Guide to

Sending Pandas DataFrame as JSON to CoreUI/React template

In this tutorial, we are going to use a CoreUI React template as and Python backend with Pandas to read a CSV and render in the UI as JSON Table.

· Web Dev Zone ·
Free Resource

Tutorial Objective

By the end of this tutorial, you will be able to do the following:

  • Core UI React Template
  • Python with Flask RESTful API
  • Using Pandas module to read a CSV from the web and collect rows as Pandas DataFrame
  • Convert Pandas DataFrame to JSON
  • Send JSON result in UI and render as HTML Table

Getting Starting Code

(Bootstrap Code to Start With):

https://github.com/Avkash/300seconds/tree/master/coreui_react_python_flask_starter

If you are interested in Full Stack Development — Getting Started (Part 1) tutorial to learn how we arrived here, please follow this Part1 tutorial.

Coding Exercise

Here are the steps you would need to take on both (frontend and backend) sides to make this full code working:

FrontEnd Coding:

  1. Add a new page (CsvDataReader.js) to your core UI template
  2. Add routes, navigation and menu support in the layout to launch your page when clicked
  3. Add ts-react-json-table to your package.json and run “npm update”. This will let you use JsonTable react component to render a table from JSON data object.

Following the CsvDataReader.js code:

JavaScript
 




x
99


1
import React, { Component, lazy, Suspense } from 'react';
2
import {
3
  Card,
4
  CardBody,
5
  CardFooter,
6
  CardHeader,
7
  CardTitle,
8
  Col,
9
  Row,
10
} from 'reactstrap';
11
import JsonTable from 'ts-react-json-table';
12
import GetRestObject from '../../api/ConnectServerGet';
13
import PostRestObject from '../../api/ConnectServerPost';
14
 
          
15
 
          
16
class CsvDataReader extends Component {
17
    constructor(props) {
18
      super(props);
19
  
20
      this.state = {
21
          csvDataObject:[]
22
      };
23
    }
24
  
25
    HelloGetRequestedDetails = () => {
26
      GetRestObject.GetRestRequest(`/v1/datareader`, getResultObj => {
27
          this.setState({
28
            csvDataObject:getResultObj   
29
          })
30
      });
31
    }
32
 
          
33
    renderColumnNames = (colmunList) => {
34
        return(
35
            colmunList.map( (item, index) => {
36
                return(
37
                    <span key={index} className="mr-1 text-default">{index+1}: {item}</span>
38
                )
39
            })
40
        )
41
    }
42
 
43
    renderCsvDataResults = () => {
44
        if (this.state.csvDataObject && this.state.csvDataObject.resultStatus && this.state.csvDataObject.resultData){
45
            var apiStatus = this.state.csvDataObject.resultStatus;
46
            var apiData = this.state.csvDataObject.resultData;
47
            if (apiStatus === 'SUCCESS' && apiData.length == 1){
48
                apiData = apiData[0]
49
                return(
50
                    <div>
51
                        <span className="text-success">Rows: <span className="text-primary"><b>{apiData.rows}</b></span></span>
52
                        <br/>
53
                        <span className="text-success">Columns: <span className="text-primary"><b>{apiData.cols}</b></span></span>
54
                        <br/>
55
                        <span className="text-success">Column Names: 
56
                            <span className="text-primary"><b>{this.renderColumnNames(apiData.columns)}</b></span>
57
                        </span>
58
                        <hr/>
59
                        <Card>
60
                            <CardHeader>All Rows</CardHeader>
61
                            <CardBody className="mb-1" style={{height:'400px', overflowY: "auto", overflow: "-moz-scrollbars-horizontal"}}>
62
                                <JsonTable rows={apiData.rowData} columns={apiData.columns} />
63
                            </CardBody>
64
                        </Card>
65
                    </div>
66
                )
67
            } else {
68
                return(
69
                    <div>
70
                        <span className="text-danger">{apiData[0].message}</span>
71
                    </div>
72
                )
73
            }
74
        }
75
    }
76
 
          
77
    componentDidMount(){
78
      this.HelloGetRequestedDetails()
79
    }
80
 
          
81
    loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
82
  
83
    render() {
84
  
85
      return (
86
        <div className="animated fadeIn">
87
          <Row>
88
            <Col md={12}>
89
              <h3>Data Reader Starter</h3>
90
              <hr/>
91
              {this.renderCsvDataResults()}
92
            </Col>
93
          </Row>
94
        </div>
95
    );
96
  }
97
}
98
 
          
99
export default CsvDataReader;



Backend Coding

  1. Add support for API (/v1/datareader) by adding a resource
Java
 




x


 
1
# app.py
2
api.add_resource(DataHandlerFunction, '/v1/datareader')


2. Implement DataHandlerFunction in CsvDataHandler.py as below:

Python
 




xxxxxxxxxx
1
42


 
1
from flask_restful import Api, Resource, reqparse
2
import pandas as pd
3
import requests
4
import io
5
 
          
6
 
          
7
class DataHandlerFunction(Resource):
8
    '''
9
    '''
10
    def get(self):
11
        result_status, result_data = CSVReaderToJson()
12
        return {'resultStatus': result_status, 'resultData': result_data}
13
 
          
14
 
          
15
def CSVReaderToJson():
16
    result_status = 'FAILURE'
17
    result_data = []
18
    csv_url = "https://raw.githubusercontent.com/cs109/2014_data/master/countries.csv"
19
 
          
20
    try:
21
        url_content = requests.get(csv_url).content
22
        csv_data = pd.read_csv(io.StringIO(url_content.decode('utf-8')))
23
 
          
24
        row_count = csv_data.shape[0]
25
        column_count = csv_data.shape[1]
26
        column_names = csv_data.columns.tolist()
27
 
          
28
        # Option [1]
29
        # row_json_data = csv_data.to_json(orient='records')
30
 
          
31
        # Option [2]
32
        final_row_data = []
33
        for index, rows in csv_data.iterrows():
34
            final_row_data.append(rows.to_dict())
35
 
          
36
        json_result = {'rows': row_count, 'cols': column_count, 'columns': column_names, 'rowData': final_row_data}
37
        result_data.append(json_result)
38
        result_status = 'SUCCESS'
39
    except:
40
        result_data.append({'message': 'Unable to process the request.'})
41
 
          
42
    return result_status, result_data


Final Source Code (Both CoreUI Frontend and Python Backend)

https://github.com/Avkash/300seconds/tree/master/coreui_react_python_flask_pandas_starter

YouTube Tutorial (00:43.30 Minutes)


That’s all, thank you.
Topics:
api gateways, coreui, flask, frontend developer, fullstack development, pandas data frames tutorial, python 3, tutorial, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}