How to fetch and represent data produced by python in react web app

Question

I am currently working on a small project to build a web application to visualize some local data produced by some Python scripts I have already finished, and the front-end data visualization is written in react. I am kinda confused how could I fetch the data to represent on my web app. I saw some suggestion of using fetch() instead of jQuery. But everything I have done yet is just locally hosted, so how could I make the request to Python scripts in React and how should I retrieve params from the fetch() request in Python? Thank you!

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import RadarChart from './components/RadarChart';
import LineChart from './components/LineChart';

class App extends Component {
  constructor() {
    super();
    this.state = {
      bioData: {},
      appData: {}
    }
  }

  componentWillMount() {
    this.getChartData();
  }
  
  static lastSyncTime = "2017-06-28";
  getChartData() {
    // TODO: AJAX calls/fetch() request here to retrieve data as well as pass a param: lastTimeSync to Python scripts
    this.setState({
      
    });
  }

  
  

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Daily Report</h2>
        </div>
        <LineChart  chartData={this.state.bioData} />
        <br/>
        <button onClick = {this.handleRefreshLine}>Refresh</button>
        <br/>
        <RadarChart chartData={this.state.appData} />
      </div>
    );
  }
}

export default App;

You'll need to expose an api from your python backend. You'll need to make an endpoint that accepts params and returns your data. If using fetch (or axios), you'll then update your state with the response from your backend. Too broad of a question to give specific code examples though. — Chase DeAnda
– Chase DeAnda, Commented Jul 6, 2017 at 22:04
@ChaseDeAnda thx man. I am just looking for a direction, not exactly the code. I'll try your suggestion! — Tommy Tang
– Tommy Tang, Commented Jul 7, 2017 at 4:31

Dmitry Sokurenko · Accepted Answer · 2017-07-07 01:34:20Z

1

Something like this may help you:

getChartData() {
  $.getJSON("https://yourserver.com/your/python/api", { lastTimeSync: App.lastSyncTime }).then(results => {
    this.setState({ appData: results.appData, bioData: results.bioData })
  })
}

answered Jul 7, 2017 at 1:34

Dmitry Sokurenko

6,1324 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fetch and represent data produced by python in react web app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related