I want to convert the answer of an API (I get the answer in JSON format) to a CSV format and download the file.
I found some ReactJS component like react-json-csv but I can't figure out how to use it in my code.
I have some checkboxs where the user make his choices (download JSON, CVS) and then a button "download", in the handler I check which checkbox is checked and that's where I want to convert JSON to CSV (in the handler).
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from "react-bootstrap/Button";
import {toast, ToastContainer} from "react-toastify";
export default class Success extends React.Component {
constructor(props) {
super();
this.state = {
jsondata : props.location.state.referrer
} //put jsons data in state object
}
onClickHandlerDownload = () => {
if(document.getElementById('csvData').checked){
toast.success('We will download a CSV file ' + document.getElementById('csvData').checked);
// here I want to convert JSON to CSV
}
if(document.getElementById('jsonData').checked){
toast.success('We will download a JSON file ' + document.getElementById('jsonData').checked);
console.log(this.state.jsondata);
}
}
render() {
return (
<div className="container">
<p style={{textAlignVertical: "center", textAlign: "center", fontSize: 30}}>Extract the human
skeleton of your videos of choice</p>
<div className="row">
<div style={{padding: '50px 300px 100px 300px'}} className="col-md-12 offset-md-12 card">
<p style={{textAlignVertical: "center", textAlign: "center", fontSize: 22, color:"green"}}>File processed with success</p>
<form action="/analyse" method="post" encType="multipart/form-data">
<div className="form-group">
<div>
<input type="checkbox" id="withSkeleton"/>
<label htmlFor="withSkeleton">Download file with skeleton</label>
</div>
<div>
<input type="checkbox" id="withoutSkeleton"/>
<label htmlFor="withoutSkeleton">Download only the skeleton</label>
</div>
<div>
<input type="checkbox" id="csvData"/>
<label htmlFor="withoutSkeleton">Download data as CSV</label>
</div>
<div>
<input type="checkbox" id="jsonData"/>
<label htmlFor="withoutSkeleton">Download data as JSON</label>
</div>
</div>
<ToastContainer/>
<Button type="button" className="btn btn-success btn-block"
onClick={this.onClickHandlerDownload}>Download
</Button>
</form>
</div>
</div>
</div>
)
}
}
So how can I convert JSON to CSV and download it ?