如何在ReactJS中将CSV文件数据转换为JSON对象？

Question

我想从输入标签中获取csv文件，并将csv文件的数据转换为JSON对象。在React.js中是否有任何插件或任何自定义代码可用？

- Rushikesh Shirkar

---

嗨，试试这个网址 https://stackoverflow.com/questions/61723056/reactjs-converting-a-csv-file-in-local-to-json - Zubair Saif

Answer 1

你可以使用类似Papa Parse的外部库来解析CSV数据。

一个简单的type为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>
  );
}

- junkie

Answer 2

我将不使用任何外部库来解析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>
     );
   }

在控制台中查看csv转json的输出结果。

- Sushant Kalikaprasad Pal

Answer 3

您可以使用PapaParse，它可以满足以下需求：

CSVReader – React组件，用于处理CSV文件输入并将其内容作为数组返回。

CSVDownloader – React组件，呈现链接/按钮，点击该链接/按钮下载以CSV格式提供的数据。

readString – 读取CSV逗号分隔字符串并将其内容作为数组返回的函数。

readRemoteFile – 读取远程CSV文件并将其内容作为数组返回的函数。

jsonToCSV – 读取对象（JSON）数组并将其内容作为CSV逗号分隔字符串返回的函数。

在代码中，我已经使用它来读取远程CSV文件并将其转换为JSON格式，

import React from 'react';

import { usePapaParse } from 'react-papaparse'; import xlsx from 'xlsx';

export default function App() { const { readRemoteFile } = usePapaParse(); const link = '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

- Rajashekaran S

Answer 4

您可以参考下面的链接。

https://www.npmjs.com/package/react-papaparse

在 handleOnFileLoad 方法中，您将收到从 CSV 文件获取的数据。 您将直接从那里获得 JSON 响应。 上面的链接不支持 xlsx 格式。 您需要另一个npm包才能支持它。

- Chandra Shekar