如何將 csv 文件數據轉換為 Z3C797270102480CB4D1207D1E1D07A3 中的 json object？

Question

我想從輸入標簽中獲取 csv 文件並將 csv 文件的數據轉換為 json ZA8CFDE6331BD59EB2AC96F8911B4。 react js中是否有任何插件或任何自定義代碼？

Answer 1

您可以使用像Papa Parse這樣的外部庫來解析 CSV 數據。

類型為文件的簡單輸入標簽可以讀取 CSV 數據。

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

請聲明handleFileUpload function 並使用里面的庫來解析讀取的數據。

這是一個示例，它將讀取 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>
  );
}

Answer 2

你可以參考下面這個鏈接。

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

在 handleOnFileLoad 方法中，您將收到從 csv 文件中獲取的數據。 您將直接從那里收到 JSON 響應。 以上鏈接不支持 xlxs 格式。 你需要另一個 npm package 。

Answer 3

我沒有使用任何外部庫來解析 CSV 文件。

參考下面的代碼：

應用程序.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>
     );
   }

在控制台中查看 output 的 csv 到 json 轉換。