DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Because the DevOps movement has redefined engineering responsibilities, SREs now have to become stewards of observability strategy.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Related

  • How To Build AI-Powered Prompt Templates Using the Salesforce Prompt Builder
  • Streamlining Event Data in Event-Driven Ansible
  • Python Packages for Validating Database Migration Projects
  • Dynamic Web Forms In React For Enterprise Platforms

Trending

  • Developers Beware: Slopsquatting and Vibe Coding Can Increase Risk of AI-Powered Attacks
  • How To Build Resilient Microservices Using Circuit Breakers and Retries: A Developer’s Guide To Surviving
  • Tired of Spring Overhead? Try Dropwizard for Your Next Java Microservice
  • How to Use AWS Aurora Database for a Retail Point of Sale (POS) Transaction System
  1. DZone
  2. Coding
  3. Languages
  4. Sending Pandas DataFrame as JSON to CoreUI/React template

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 
Avkash Chauhan user avatar
Avkash Chauhan
·
Jun. 25, 20 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
15.4K Views

Join the DZone community and get the full member experience.

Join For Free

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

  • coreui_react_starter
  • python_flask_server_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.
JSON Pandas Template

Opinions expressed by DZone contributors are their own.

Related

  • How To Build AI-Powered Prompt Templates Using the Salesforce Prompt Builder
  • Streamlining Event Data in Event-Driven Ansible
  • Python Packages for Validating Database Migration Projects
  • Dynamic Web Forms In React For Enterprise Platforms

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

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!