Btukfyl

I have the following csv file that is named data.csv and located in the same folder as my js controller:

namn,vecka,måndag,tisdag,onsdag,torsdag,fredag,lördag,söndag

Row01,a,a1,a2,a3,a4,a5,a6,a7

Row02,b,b1,b2,b3,b4,b5,b6,b7

Row03,c,c1,c2,c3,c4,c5,c6,c7

Row04,d,d1,d2,d3,d4,d5,d6,d7

Row05,e,e1,e2,e3,e4,e5,e6,e7

Row06,f,f1,f2,f3,f4,f5,f6,f7

Row07,g,g1,g2,g3,g4,g5,g6,g7

Row08,h,h1,h2,h3,h4,h5,h6,h7

Row09,i,i1,i2,i3,i4,i5,i6,i7

Row10,j,j1,j2,j3,j4,j5,j6,j7

Row11,k,k1,k2,k3,k4,k5,k6,k7

Row12,l,l1,l2,l3,l4,l5,l6,l7

In react, I need to import a csv file and parse it to JSON. I tried the following:

componentWillMount() {

    this.getCsvData();

}



getData(result) {

    console.log(result);

}



getCsvData() {

    let csvData = require('./data.csv');



    Papa.parse(csvData, {

        complete: this.getData

    });

}

This doesnt work for some reason. The first console.log displays /static/media/data.0232d748.csv and the second displays the following:

{

  "data": [

    [

      "/static/media/horoscope-data.0232d748.csv"

    ]

  ],

  "errors": [

    {

      "type": "Delimiter",

      "code": "UndetectableDelimiter",

      "message": "Unable to auto-detect delimiting character; defaulted to ','"

    }

  ],

  "meta": {

    "delimiter": ",",

    "linebreak": "n",

    "aborted": false,

    "truncated": false,

    "cursor": 41

  }

}

I don't understand what I am doing wrong. Can someone help me?

To answer my own question, I was able to rewrite it like this (/src/controllers/data-controller/data-controller.js, added the full code for better clarity):

import React from 'react';

import Papa from 'papaparse';

import {withRouter} from 'react-router-dom';



class DataController extends React.Component {



    constructor(props) {

        super(props);



        this.state = {

            data: 

        };



        this.getData = this.getData.bind(this);

    }



    componentWillMount() {

        this.getCsvData();

    }



    fetchCsv() {

        return fetch('/data/data.csv').then(function (response) {

            let reader = response.body.getReader();

            let decoder = new TextDecoder('utf-8');



            return reader.read().then(function (result) {

                return decoder.decode(result.value);

            });

        });

    }



    getData(result) {

        this.setState({data: result.data});

    }



    async getCsvData() {

        let csvData = await this.fetchCsv();



        Papa.parse(csvData, {

            complete: this.getData

        });

    }



    render() {

        return (

            <section className="data-controller">

                ...

            </section>

        );

    }

}



export default withRouter(DataController);

Here I use the built in fetch to get it like a stream and then read the stream using the build in stream reader, and decode the data using TextDecoder. I had to move the file also. Before it was located in /src/controllers/data-controller but I had to move it to /public/data.