logo标签列表

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

javascripthtmljsonfilereader
3
最初的回答： 我希望从CSV文件的内容创建一个JSON对象。使用FileReader API本地加载CSV文件似乎可以工作，但是我在按照所需的方式构建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数据结构化为上述所需的格式，我尝试了以下方法，但对我来说没有起作用：

原始答案： Original Answer

<!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对象？欢迎提供任何建议。

最初的回答：

只是好奇，这是你实际的CSV结构吗？似乎每6个条目后应该有一个换行符\n... - War10ck
3个回答
2
如果您在解析数据方面遇到困难，您也可以使用PapaParse，它有很多配置选项，而且非常容易使用：
// Parse CSV string
var data = Papa.parse(csv);

请查看更多信息，访问https://www.papaparse.com/demo

2

一种方法是按照“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);

@beyond_inifinity 很高兴我能帮到你！抱歉，我不确定我是否理解 - 你想让我展示如何将convertToJson()函数与你问题中的代码集成吗？ - Dacre Denny
@beyond_inifinity 很高兴听到这篇回答有所帮助，并感谢您接受了它。我创建了一个jsFiddle https://jsfiddle.net/yrsap3ej/ 来展示代码如何集成 - 希望这能帮到你 :) - Dacre Denny
@Darce Denny：根据您的解决方案，我该如何将新生成的结构化JSON导出到本地驱动器？有什么想法吗？ - beyond_inifinity
1
你好，一种方法是通过数据 URL 创建一个临时下载链接来获取数据，我马上会在这里发布一个链接。 - Dacre Denny
1
@beyond_inifinity 看看这个 https://codepen.io/vidhill/pen/bNPEmX 。它可以让你将应用程序中的数据下载到本地机器上的文件（即硬盘）中。希望能有所帮助。 - Dacre Denny
显示剩余2条评论
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的结构始终保持不变。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接