Breaking News: Grepper is joining You.com. Read the official announcement!

react convert excel to json

Jobayerdev answered on January 17, 2021 Popularity 10/10 Helpfulness 4/10

answer react convert excel to json

related react convert excel to json

react convert excel to json

Comment

import React, { useState } from "react";
import "./App.css";
import * as XLSX from "xlsx";

class ExcelToJson extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      file: "",
    };
  }

  handleClick(e) {
    this.refs.fileUploader.click();
  }

  filePathset(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = e.target.files[0];
    console.log(file);
    this.setState({ file });

    console.log(this.state.file);
  }

  readFile() {
    var f = this.state.file;
    var name = f.name;
    const reader = new FileReader();
    reader.onload = (evt) => {
      // evt = on_file_select event
      /* Parse data */
      const bstr = evt.target.result;
      const wb = XLSX.read(bstr, { type: "binary" });
      /* Get first worksheet */
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      /* Convert array of arrays */
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      /* Update state */
      console.log("Data>>>" + data);// shows that excel data is read
      console.log(this.convertToJson(data)); // shows data in json format
    };
    reader.readAsBinaryString(f);
  }

  convertToJson(csv) {
    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
    return JSON.stringify(result); //JSON
  }

  render() {
    return (
      <div>
        <input
          type="file"
          id="file"
          ref="fileUploader"
          onChange={this.filePathset.bind(this)}
        />
        <button
          onClick={() => {
            this.readFile();
          }}
        >
          Read File
        </button>
      </div>
    );
  }
}

export default ExcelToJson;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: excel javascript to-json

Link to this answer
Share Copy Link

Contributed on Jan 17 2021

Jobayerdev

0 Answers Avg Quality 2/10

Closely Related Answers

react convert excel to json

Comment

test,retrere

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: excel javascript to-json

Link to this answer
Share Copy Link

Contributed on Feb 16 2022

Cruel Cobra

0 Answers Avg Quality 2/10

react convert excel to json

Contents

More Related Answers

react convert excel to json

Closely Related Answers

react convert excel to json

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.