How to extract JSON data fetched from API and pass into react-plotly?

Question

In the response of a POST request, I have got the following JSON data,

{"chart":
  {
  "data":[
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
    "type": "scatter",
    "name":"Plot 1"
    },
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
    "type": "scatter",
    "name":"Plot 2"
    },
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
    "type": "scatter",
    "name":"Plot 3"
    }
  ],

  "layout":{
   "showlegend": true,
   "legend": {"orientation": "h"}
  }
 }
}

now that, I have got the response yet cannot plot the graph as expected. following is the js code I have written so far,

const dataForPost = {
    dataset_id: 1,
    features: [],
    analysis_level: 1
};

export default function DomainAssesment(){

    const [graphData, setGraphData] = useState('');
    const postData = (event) => {
        axios.post('http://localhost:5000/Plot', dataForPost)
         .then((response) =>{        
            setGraphData(response.data.chart);
            console.log(graphData);
         });
    }

    return (
        <Container>
            <Button className="success" onClick={postData}>Get Graph</Button>
            <Plot data={graphData.data} layout={graphData.layout} />
        </Container>
    );

}

And the outcome in the console log is something like this,

Any kind of advice or suggestion will be much appreciated.

Jayesh Tanna · Accepted Answer · 2020-04-29 01:28:40Z

write your logic using response.data object. Map response.data.object with your UI model and then update the state of react component which will ultimately call the render method to render component again. See example below.

private getBoardings = () => {
const uri = "YOUR_URL"; //get or post whatever it is
trackPromise(
  this._ajaxhelper.get(uri,
    (response) => { this.listOnboardingSuccess(response); },
    (error) => { this.listOnboardingFailure(error); }));
}

private listOnboardingSuccess(response: any) {
       const boardings = [] as IboardingContext[];
       response.data.boardings.map((boarding: any) => {
             if (boarding != null) {
                 boardings = this.OnboardingMapping(boarding); //mapping of response
             }
       });
       this.setState({ boards: [...boards], loading: false }); //Update state here
}

Collectives™ on Stack Overflow

How to extract JSON data fetched from API and pass into react-plotly?

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