Fetch data using an API
Kindly let me know where I have gone wrong. The below code is fetching the data, but it is not displaying the data in the table. Here is my code:
import React from ‘react’;
import * as WebDataRocksReact from ‘./webdatarocks.react’;
export class App extends React.PureComponent {
state = {
products: []
}
componentDidMount = () => {
this.getProducts()
}
getProducts = _=>{
fetch(‘/api/products’)
.then(res => res.json())
.then(products => this.setState({products:products}, () => console.log(‘Products fetched …’, products)));
}
render() {
const {products} = this.state;
return (
<div>
<WebDataRocksReact.Pivot toolbar={true}
report= {{dataSource: {data: products }}} />
</div>
);
}
}
export default App;
3 answers
Hello!
Thank you for writing to us.
It seems that the “products” in this.state are empty when render() is performed. This is the reason why the grid appears empty.
Please make sure that the data is already loaded or refer WebDataRocks directly to the remote resource.
Best Regards,
WebDataRocks Team
Kindly let me know where I have gone wrong. Thanks you very much.
TypeError: window.WebDataRocks is not a constructor
Pivot.componentDidMount
C:/Server/Apache24/htdocs/SistemasBD/src/views/Dashboard2/webdatarocks.react.js:54
Hello, Hildemar,
Thank you for reaching out to us.
Uncaught TypeError: window.WebDataRocks is not a constructor means that webdatarocks.js is not properly included in your project. Please verify that the file is included correctly.
We kindly recommend find out an example of including WebDataRocks: https://github.com/WebDataRocks/pivot-react/blob/master/public/index.html
Please, let us know if you have other questions.
Kind regards,
WebDataRocks Team