How to update Json datasource using React

posted on June 22nd, 2020

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:

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();
    }
    ...
}

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>
  );
}

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

Changes to Flexmonster Software License Agreement

How to update Json datasource using React

5 answers

Please login or Register to Submit Answer