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.
By
·
·
Tutorial
Likes
(1)
Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!
Comment
Save
15.2K Views
Join the DZone community and get the full member experience.
Join For FreeTutorial 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:
- Add a new page (CsvDataReader.js) to your core UI template
- Add routes, navigation and menu support in the layout to launch your page when clicked
- 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
- 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)
JSON
Pandas
Template
Opinions expressed by DZone contributors are their own.
Comments