从 JavaScript 中的 CSV 文件创建结构化 JSON 对象？

Question

我想从 CSV 文件的内容创建一个 JSON 对象。 CSV 文件是通过 FileReader API 在本地加载的，这似乎可行，但是我无法以所需的方式构建 JSON。

我加载 CSV 文件的代码如下所示：

<!DOCTYPE html>
<html>
    <body>
        <p>Select local CSV File:</p>
        <input id="csv" type="file">
        <output id="out"> input file content</output>
        <script>
            var fileInput = document.getElementById("csv"),
            readFile = function () {
                var reader = new FileReader();
                reader.onload = function () {

                    // Display CSV file contents
                    document.getElementById('out').innerHTML = reader.result;
                };

                reader.readAsBinaryString(fileInput.files[0]);
            };
            fileInput.addEventListener('change', readFile);
        </script>
    </body>>
</html>

上面的代码允许我加载 CSV 文件的内容并将它们显示在当前页面上。为了将 CSV 数据构造成上面所需的格式，我尝试了以下方法，但它对我不起作用：

<!DOCTYPE html>
<html>
    <body>
        <script>
            var fileReader = new FileReader();
            function getFile(inputFile) {
            let file = inputFile.files[0];
            fileReader.readAsText(file);
            }
            function csvJSON(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 JSON.stringify(result); //JSON
            }
            function readFile(evt) {
            let parsed = csvJSON(evt.target.result);
            return parsed;
            }
        </script>
    </body>
</html>

我怎样才能获得我期望的 JSON 对象？如有任何建议，我们将不胜感激

Answer 1

var csv = '"Timestamp","Enter First Name:","Enter Middle Initial","Enter Last Name:","Enter UIN:","Are you attending the event?"\n"2019/02/22 12:41:56 PM CST","Jonathan","Samson","Rowe","123456789","No"\n"2019/02/22 12:44:56 PM CST","phil","Aspilla","beltran","123456788","Yes"';

var csvJSON = function(csv) {
  let vals = csv.split('\n'), ret = [];
  for( let i = 1, len = vals.length; i < len; i++ ){
    let person = vals[i].split(',');
    ret.push({
      uin : person[4],
      studentInfo : {
        firstName : person[1],
        middleName : person[2],
        lastName : person[3],
        rsvpStatus : person[5]
      }
    });
  }
  return JSON.stringify(ret);
}

console.log(csvJSON(csv));

这是假设 CSV 的结构始终相同。

Answer 2

如果你解析数据很吃力，也可以使用PapaParse，它的配置非常多，使用起来也很简单：

// Parse CSV string
var data = Papa.parse(csv);

在 https://www.papaparse.com/demo

查看更多信息

Answer 3

一种方法是以“6”为增量迭代输入的 CSV 数据（其中 6 代表每个学生的不同数据位数）以捕获每个 CSV 行的所有学生数据，然后以所需格式填充结构化 JSON 对象数组，如下所示：

/* Helper function to perform the CSV to JSON transform */
function convertToJson(inputCsv) {

  /* Split input string by `,` and clean up each item */
  const arrayCsv = inputCsv.split(',').map(s => s.replace(/"/gi, '').trim())

  const outputJson = [];

  /* Iterate through input csv at increments of 6, to capture entire CSV row 
     per iteration */
  for (let i = 6; i < arrayCsv.length; i += 6) {

    /* Extract CSV data for current row, and assign to named variables */
    const [date, firstName, middleName, lastName, uin, rsvpStatus] = 
    arrayCsv.slice(i, i + 6)
    
    /* Populate structured JSON entry for this CSV row */
    outputJson.push({
      uin,
      studentInfo: {
        firstName,
        middleName,
        lastName,
        rsvpStatus
      }
    });
  }

  return outputJson;
}

/* Input CSV data from your exsiting code */
const csv = `"Timestamp", "Enter First Name:", "Enter Middle Initial", 
"Enter Last Name:", "Enter UIN:", "Are you attending the event?",
  "2019/02/22 12:41:56 PM CST", "Jonathan", "Samson", "Rowe", "123456789", 
"No", "2019/02/22 12:44:56 PM CST", "phil", "Aspilla", "beltran", "123456788", 
"Yes"`

const json = convertToJson(csv);

console.log(json);

从 JavaScript 中的 CSV 文件创建结构化 JSON 对象？

Create structured JSON object from CSV file in JavaScript?

html

javascript

json

filereader