Fetch data using an API

Answered

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

WebDataRocks Team WebDataRocks April 22, 2019

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

Hildemar October 25, 2019

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
 

WebDataRocks Team WebDataRocks November 4, 2019

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