Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to update Json datasource using React

Answered
Koryn Zuñiga asked on June 22, 2020

Hi, I´m using React and when I try to update the data with an action, but it does not refresh the data. 
This is my code:

var reporte: Report = {        
                dataSource: {
                    dataSourceType: “json”                    
                    ,data : this.state.jsonDatos,
                },    
                localization: idiomaES,    
                options: {
                viewType: “grid”,
                drillThrough: false,
                editing: false,
                showEmptyData: false,
                showDrillThroughConfigurator: true
                },
                slice: this.configuracionSlice 
            };

As you can see I´m setting the data with State. But the state doesn´t refresh the data, when I fire a method.

udpateData = ()=>{
        this.setState({
            jsonDatos:this.setState({
                    jsonDatos: [“Json data”] // Here goes all the data that we need for showing.
                })
        });
    }

Can you give me an example of that, please?

5 answers

Public
Vera Didenko Flexmonster June 23, 2020

Hello, Koryn,
 
Thank you for writing to us. 
 
We would like to explain that to update the data in Flexmonster, Flexmonster’s updateData() API call needs to be used.
For example, you could call the updateData() API call after the data is updated in the state:

udpateData = ()=>{
    this.setState({
        jsonDatos:this.setState({
            jsonDatos: ["Json data"]
        })
    });
...
//Pass the updated data to Flexmonster:
this.refs.pivot.flexmonster.updateData({data: this.state.jsonDatos});
}

For more details about the updateData() API call, please see the following guide: https://www.flexmonster.com/api/updatedata/
 
Please let us know if this helps.
Looking forward to your response.
 
Kind regards, 
Vera

Public
Koryn Zuñiga June 23, 2020

Hi Vera,

Thanks for your quick response.

Do you know how can I get this variable:

this.refs.pivot.flexmonster

with this React version : “16.4.0” ?

Public
Vera Didenko Flexmonster June 23, 2020

Hello, Koryn,
 
Thank you for your reply.
 
The Flexmonster instance ( this.refs.pivot.flexmonster ) can be accessed by creating a React reference (ref) to the Flexmonster component
The described approach can be seen in our sample React Flexmonster project on GitHub: https://github.com/flexmonster/pivot-react
 
Please let us know if this works.
Looking forward to your response.
 
Kind regards, 
Vera

Public
Koryn Zuñiga June 23, 2020

Thank you for your quick response but we saw that you use in your package.json the 

“@types/react”: “^16.7.6”,
“@types/react-dom”: “^16.0.9”,

“react”: “^16.8.1”,
“react-dom”: “^16.8.1”,

But we need to use

“react”: “16.4.0”,

“react-dom”: “16.4.0”,

“@types/react”: “16.0.18”,

“@types/react-dom”: “16.0.2”

 

What is happening is that this statement doesn´s work. 
private flexmonsterRef = React.createRef<FlexmonsterReact.Pivot>();
 
Wich sentence do we need with the versión of react the we specified?

Public
Vera Didenko Flexmonster June 24, 2020

Hello, Koryn,
 
Thank you for your reply. 
 
We would suggest the following approach: 

  1. Create a React reference in the constructor, for example: 
    import React, { Component } from 'react';
    import * as FlexmonsterReact from 'react-flexmonster';


    class PivotTable extends Component {

    constructor(props) {
    super(props);

    this.pivotRef = React.createRef();
    }
    ...
    }
  2. Link the created reference to the Flexmonster component: 
    render() {
    return (
    <div className="App">

    <button onClick={this.updateData}>Update Data</button>

    <FlexmonsterReact.Pivot
    ref={this.pivotRef}
    toolbar={true}
    report="https://cdn.flexmonster.com/reports/report.json"/>
    </div>
    );
    }
  3. Then Flexmonster’s API calls should be accessible through the reference, for example: 
    updateData = () => {

    var newData= [{...}];

    this.pivotRef.current.flexmonster.updateData({data: newData});

    }

 
Please let us know if this works.
Looking forward to your response.
 
Kind regards, 
Vera

Please login or Register to Submit Answer