render json on the client in react

Question

I've created file uploading component in react which is going to upload csv file and parse it and render it as json on the client. But now my code can upload csv file on the console log only, and I have a hard time why it didn't parse csv and render it on the browser (client side).

I looked into react tutorial video but still can't figure out how can I parse and render csv as json output on the client. how can I make this happen? any hack to get this done? any thoughts? Thanks

my file component:

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

export default class FileUpload extends Component {
//   constructor(props) {
//     super(props);
//   }
  // how to post those to database
  constructor(props) {
    super(props)
    this.state = {
      fileUpload_status: 'false'
    }
  };
  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);
      }  
      result= JSON.stringify(result, null, 4); //JSON
    console.log(result);
  }
  reader.readAsText(files[0]);
  // format json as standard json object
}
  render() {
    return (
      <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
        <button className='btn'>Upload</button>
        <div>{console.log(this.props)}</div>
      </ReactFileReader>
    );
  }
}

I got this issue because whenever csv file is uploaded, I want to populate this data to cloud database. I couldn't solve this problem. Can react community helps me out with my issue? is there any hack to fix the issue? any solution?

goal:

I am expecting local csv file to be parsed as json and render the content on the browser (client). how can I achieve my goal? any solution to get this done? thanks

"render json on the server" = huh? Sounds like you want to do this on the client. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Apr 30, 2019 at 15:25
@Diodeus-JamesMacFarlane sorry for confusion, yes, I want to render it on the client, I am new to react though. could you help me how to get over this problem? any idea? thank you — woody
– woody, Commented Apr 30, 2019 at 15:27
You are probably not forming your output properly. You can paste in in here to see where: jsonlint.com — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Apr 30, 2019 at 16:06
@Diodeus-JamesMacFarlane I did that and I got this error when I validate that Expecting 'EOF', got ','. Plus, input for file upload component comes from google form, I want to upload it to client side as json. Could you give a possible hack to solve this problem? Thank you — woody
– woody, Commented Apr 30, 2019 at 16:19

Junius L · Accepted Answer · 2019-04-30 17:06:49Z

4

Use pre and JSON.stringify()

 this.setState({
    data: JSON.stringify(result, null, 4),
  });

Render your JSON string

 <pre>{this.state.data}</pre>

demo

answered Apr 30, 2019 at 17:06

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Junius L Over a year ago

please provide me with sample csv

woody Over a year ago

here is the example csv file that I am going to upload and parse it as json: google form file. Please let me know if link doesn't work for you.

woody Over a year ago

I updated my post with the expected json output format that supposed to be rendered on the client side. Could you update your solution? thank you

Junius L Over a year ago

@woody I've updated the demo, seems to be working as expected.

Collectives™ on Stack Overflow

render json on the client in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related