Я слежу за этим сообщением из stackoverflow
Он работает с линейными JSON данными, но не работает с вложенными объектами.
Это структура из моего JSON.
[
{
"uuid": "c47dea20",
"siteName": "site",
"systemName": "abc",
"measurementName": "abc temp",
"statistics": {
"dateStart": "2020-04-20T00:00:00Z",
"dateStop": "2020-04-21T00:00:00Z",
"values": [],
"min": [
1,
2
],
"max": [],
"average": [],
"last": [
7,
8
],
"bucket_size": "4h",
"buckets": {}
}
}
]
это код:
class DataViewTable extends Component {
constructor(props) {
super(props);
this.state = {
measurementsData: [],
isLoading: true,
dropdownOpen: false,
dataToDownload: [],
};
this.reactTable = React.createRef();
}
componentDidMount() {
this.handleGetmeasurementsDataInfo();
}
handleGetmeasurementsDataInfo = async () => {
await axios
.get("https://run.mocky.io/v3/bca87207-3049-45c8-97e9-8b7cda1368c4")
.then((response) => {
// handle success
console.log("measurement data:", response.data);
this.setState({ isLoading: false, measurementsData: response.data });
})
.catch((error) => {
// handle error
if (axios.isCancel(error)) {
console.log("Unable to fetch measurementsData", error.message);
} else {
this.setState({ isLoading: true });
}
});
};
MyCell({
value,
columnProps: {
rest: { someFunc },
},
}) {
const data = {
labels: value.map((val, idx) => {
return idx;
}),
datasets: [
{
backgroundColor: [
"#ff8779",
"#2a84e9",
"#e2e2e2",
"#ff8779",
"#2a84e9",
"#e2e2e2",
],
data: value,
},
],
};
return <Pie data={data} />;
}
// TODO: below methods is for downloading csv
// ! approach 1
download(event) {
const currentRecords = this.reactTable.getResolvedState().sortedData;
var data_to_download = [];
for (var index = 0; index < currentRecords.length; index++) {
let record_to_download = {};
for (
var colIndex = 0;
colIndex < this.reactTable.columns.length;
colIndex++
) {
record_to_download[this.reactTable.columns[colIndex].Header] =
currentRecords[index][this.reactTable.columns[colIndex].accessor];
}
data_to_download.push(record_to_download);
}
this.setState({ measurementsData: data_to_download }, () => {
// click the CSVLink component to trigger the CSV download
this.csvLink.link.click();
});
}
render() {
const { dropdownOpen, measurementsData, isLoading } = this.state;
if (isLoading) {
return <div>Loading...</div>;
}
return (
<>
<div className="content">
<Row className="mt-5">
<Col xs={12} md={12}>
<Card>
<CardHeader>
<Dropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
<DropdownToggle caret>Ships</DropdownToggle>
{measurementsData.map((measurementData) => {
return (
<DropdownMenu key={measurementData.uuid}>
<DropdownItem>
{measurementData.siteName}
<DropdownItem divider />
</DropdownItem>
</DropdownMenu>
);
})}
</Dropdown>
<div>
<CSVLink
data={[...measurementsData]}
filename="data.csv"
className="hidden"
ref={(r) => (this.csvLink = r)}
onClick={this.export}
>
export csv
</CSVLink>
</div>
</CardHeader>
<CardBody>
<ReactTable
ref={(r) => (this.reactTable = r)}
data={[...measurementsData]}
pageSize={
measurementsData.length > 10
? 10
: measurementsData.length
}
filterable
resizable={true}
columns={[
{
Header: "System",
accessor: "systemName",
},
{
Header: "Measurement",
accessor: "measurementName",
},
{
Header: "Value",
accessor: "statistics.values",
},
{
Header: "Min",
accessor: "statistics.min",
},
{
Header: "Max",
accessor: "statistics.max",
},
{
Header: "Avg",
accessor: "statistics.average",
},
{
Header: "Last",
accessor: "statistics.last",
},
{
Header: "Bar",
accessor: "statistics.buckets.values",
Cell: this.MyCell,
},
]}
showPaginationTop
showPaginationBottom={false}
className="-striped -highlight"
/>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
);
}
}
ПРОБЛЕМЫ:
он напрямую отображает ответ. данные вместо данных из таблицы ie. он не должен отображать такие вещи, как UUID в CSV
для statistics: он показывает [object object] в CSV.
