1

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 ?

J.erome
  • 688
  • 7
  • 26
  • Does this answer your question? [How to export JavaScript array info to csv (on client side)?](https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side) – Someone Special Nov 24 '20 at 14:55
  • yes it will do the job thank you ! – J.erome Nov 24 '20 at 14:56
  • You can try this [react-csv npm](https://www.npmjs.com/package/react-csv) as well. Convert your json to the required input data of the library first. – Cayenne Teoh Nov 24 '20 at 15:05

0 Answers0