Read a File through FileReader Api and Convert it into json object

Question

I am working on a Reactjs Project .In the project I have scenario like I need to read a csv file from local and convert it into json objects. I am using csvtojson node package for converting csv files to json objects. See the code below:

import React from 'react';
import ReactDOM from 'react-dom';

var objects;

var ReadFile = React.createClass({
    readFile:function(){
        var file = this.refs.file.files[0];
        var reader = new FileReader();
        reader.onload = function(evt){
             var resultText = evt.target.result;
             objects = this.csvToJson(resultText);
             console.log(objects);
        }.bind(this);
        var newFile = file.slice(0,5000);
        reader.readAsText(newFile); 
    },
    csvToJson:function(csvString){
        var Converter = require("csvtojson").Converter;
        var converter = new Converter({});
        converter.fromString(csvString, function(err,result){
           //When i console log the result it is working but when i return The result:
           // i am getting a undefined error
           //console.log(result);
           return result;
        });
    },
    render:function(){
      return (
         <input type="file" ref="file" onChange={this.readFile} /> 
      );
    }
});

ReactDOM.render(<ReadFile />,document.getElementById('container'));

When I console log the result from the csvToJson file I am getting a undefined error. Please somebody guide me, what I am doing wrong?

what is your csv input? The code looks fine and should work... — wollnyst
– wollnyst, Commented May 14, 2016 at 7:23
Did you find an answer , even I am looking for similar solutions. Let me know if you got any solution for the above — Sumanth
– Sumanth, Commented Feb 22, 2017 at 8:45
+1 for FileReader() when my current stage of development is 99% client side and using webpack-dev-server. (fs methods dont exist in browser) I got this example to work fine done in ES6 syntax. — amoreton
– amoreton, Commented May 3, 2017 at 10:03

Manish J · Accepted Answer · 2017-09-28 10:52:41Z

import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReactFileReader from 'react-file-reader';

export default class CsvRead extends React.Component {
  constructor(props) {
    super(props);
  }
  handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    // Use reader.result
    var csv = reader.result;
    var lines = csv.split("\n");
    var result = [];
    var headers=lines[0].split(",");
    for(var i=1;i<lines.length;i++){
      var obj = {};
      var currentline=lines[i].split(",");
      for(var j=0;j<headers.length;j++){
        obj[headers[j]] = currentline[j];
      }
      result.push(obj);
      }  
      //return result; //JavaScript object
      result= JSON.stringify(result); //JSON
    console.log(result);
  }
  reader.readAsText(files[0]);
}

  render() {
    return (
      <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
        <button className='btn'>Upload</button>
      </ReactFileReader>
    );
  }
}

This will work fine.

Collectives™ on Stack Overflow

Read a File through FileReader Api and Convert it into json object

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related