如何在reactjs中将csv文件数据转换为json对象?

brccelvz  于 2023-04-11  发布在  React
关注(0)|答案(4)|浏览(214)

我想从input标签中获取csv文件,并将csv文件的数据转换为json对象。react js中是否有任何插件或自定义代码?

zour9fqk

zour9fqk1#

您可以使用Papa Parse等外部库来解析CSV数据。
类型为file的简单输入标记将用于读取CSV数据。

<input
        type="file"
        accept=".csv,.xlsx,.xls"
        onChange={handleFileUpload}
      />

请声明handleFileUpload函数,使用里面的库解析读取的数据。
下面是一个示例,它将读取CSV文件并记录相应的JSON:

import Papa from "papaparse";

export default function App() {
  return (
    <div className="App">
      <input
        type="file"
        accept=".csv,.xlsx,.xls"
        onChange={(e) => {
          const files = e.target.files;
          console.log(files);
          if (files) {
            console.log(files[0]);
            Papa.parse(files[0], {
              complete: function(results) {
                console.log("Finished:", results.data);
              }}
            )
          }
        }}
      />
    </div>
  );
}
bhmjp9jg

bhmjp9jg2#

我没有使用任何外部库来解析CSV文件。
参考下面的代码:
App.js文件

import React, { useState } from "react";
   
  export default function App() {
     const [file, setFile] = useState();
   
     const fileReader = new FileReader();
   
     const handleOnChange = (e) => {
      // console.log(e.target);
       setFile(e.target.files[0]);
      // console.log(e.target.files[0]);

     };
   
     const csvFileToArray = string => {
       var array = string.toString().split(" ")
      //  console.log(array); here we are getting the first rows which is our header rows to convert it into keys we are logging it here
        var data = []
        // console.log(data);
        for(const r of array){
          // console.log(r);
            let row = r.toString().split(",")
            data.push(row)
        }
        console.log(data)
        var heading = data[0]
        // console.log(heading); to get the column headers which will act as key
        var ans_array = []
        // console.log(ans_array);
        for(var i=1;i<data.length;i++){
            var row = data[i]
            var obj = {}
            for(var j=0;j<heading.length;j++){
                if(!row[j]){
                    row[j]="NA";
                }
                // console.log(row[j].toString())
                obj[heading[j].replaceAll(" ","_")] = row[j].toString().replaceAll(" ","_")
            }
            ans_array.push(obj)
        }
        console.log({ans_array})
     };
   
     const handleOnSubmit = (e) => {
       e.preventDefault();
   
       if (file) {
         fileReader.onload = function (event) {
           const text = event.target.result;
          //  console.log(event);
          //  console.log(event.target.result);
           csvFileToArray(text);
         };
   
         fileReader.readAsText(file);
       }
     };
   
     return (
       <div style={{ textAlign: "center" }}>
         <h1 style={{color:"red"}}>CSV PARSER</h1>
         <br></br>
         <form>
           <input
             type={"file"}
             id={"csvFileInput"}
             accept={".csv"}
             onChange={handleOnChange}
           />
   
           <button
             onClick={(e) => {
               handleOnSubmit(e);
             }}
           >
             IMPORT CSV
           </button>
         </form>
   
         <br />
       </div>
     );
   }

在console中查看csv到json转换的输出。

ui7jx7zq

ui7jx7zq3#

您可以参考下面的链接。
https://www.npmjs.com/package/react-papaparse
在handleOnFileLoad方法上,你会收到从csv文件中获取的数据。你会直接从那里得到一个JSON响应。上面的链接不支持xlxs格式。你需要有另一个npm包。

w80xi6nr

w80xi6nr4#

您可以使用Papaparse,它可以用于以下要求,

CSVReader-处理CSV文件输入并将其内容作为数组返回的React组件。
CSVDownloader-呈现链接/按钮的React组件,单击该链接/按钮可以下载CSV格式的数据。
readString-读取CSV逗号分隔字符串,并以数组形式返回内容的函数。
readRemoteFile-读取远程CSV文件并以数组形式返回内容的函数。
jsonToCSV-读取对象数组(JSON)并将其内容作为CSV逗号分隔字符串返回的函数。

在代码中,我使用它读取远程CSV文件并将其转换为JSON,
import React from 'react';
import React from 'react';
import { usePapaParse } from 'react-papaparse';从'xlsx'导入xlsx;
const { readRemoteFile } = usePapaParse();const link = 'link of csv';

const handleReadRemoteFile = () => {
    readRemoteFile(link, {
        header: true,
        complete: (results) => {
            const JsonObject = JSON.stringify(results);
            console.log(JsonObject);
        },
    });
};

return < button onClick = {
    () => handleReadRemoteFile()
} > readRemoteFile < /button>;

}
你可以参考下面的链接。
https://github.com/Raja-shekaran/React-papaparse-CSVTOJSON.git

相关问题