我的csv数据如下所示:heading1,heading2,heading3,heading4,heading5,value1_1,value2_1,value3_1,value4_1,value5_1,value1_2,value2_2,value3_2,value4_2,value5_2。 ..


如何读取此数据并使用Javascript将其转换为这样的数组?:


[heading1:value1_1,heading2: value2_1,heading3:value3_1,heading4
:value4_1,heading5:value5_1],[heading1:value1_2,
heading2:value2_2,heading3:value3_2,heading4:value4_2,heading5
:value5_2]。 ..


我已经尝试过此代码,但是没有运气!:

<script type="text/javascript">
    var allText =[];
    var allTextLines = [];
    var Lines = [];

    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", "file://d:/data.txt", true);
    txtFile.onreadystatechange = function()
    {
        allText = txtFile.responseText;
        allTextLines = allText.split(/\r\n|\n/);
    };

    document.write(allTextLines);<br>
    document.write(allText);<br>
    document.write(txtFile);<br>
</script>


评论

如果CSV文件中没有换行符,那么任何JavaScript代码都将不可能知道一个数组(或对象)在哪里停止而另一个数组在哪里开始(除非您事先知道总是有五个标题)。这是剪切粘贴的监督吗?

是的,我事先知道有五个字段。

下一个问题:解决方案中允许使用jQuery吗?您使用了标签,但是示例代码是纯JavaScript。

是的,允许使用jQuery,这就是为什么我将其包含在Tag中的原因。
我认为XMLHttpRequest不允许使用file://...。

#1 楼

注意:在提醒我有效的CSV文件中可能出现的所有“特殊情况”(例如转义引号)之前,我已经制定了该解决方案。我将答案留给那些想要快速又脏的东西的人,但我建议使用Evan的答案,以确保准确性。分隔的条目,没有换行符:

data.txt:

 heading1,heading2,heading3,heading4,heading5,value1_1,...,value5_2


javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}


以下代码将在“真” CSV文件上工作,每组记录之间都有换行符:

data.txt:

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2


javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}


http://jsfiddle.net/mblase75/dcqxr/

评论


顺便说一下,这假设CSV文件实际上确实有多行-这就是allText.split(/ \ r \ n | \ n /)拆分的内容。如果实际上所有数据都是一串用逗号分隔的长字符串且没有换行符,则它不是真正的CSV文件。

–开拓者
2011-09-15 13:28

嗨,我已经使用此代码:但是没有输出。仅显示一个空白警报。我的文件如下所示:heading1,heading2,heading3,heading4,heading5,value1_1,value2_1,value3_1,value4_1,value5_1,value1_2,value2_2,value3_2,value4_2,value5_2 csv.html和data.txt都位于同一文件夹中

–马赫什(Mahesh Thumar)
2011-09-15 13:29



如果这不是正确的文件(或数据),那么我的文件应该是什么样子?

–马赫什(Mahesh Thumar)
2011-09-15 13:36

该代码可能无法处理所有有效的IETF标准CSV文件,并且如果存在带有嵌入式逗号,换行符或双引号的字符串,则该代码可能会失败。例如,由于字符串用双引号引起来,并且转义了双引号,所以允许使用“ IETF允许使用”引号”,逗号和\ n换行符。

–原型
2012年4月12日在1:39



我试图从Mac读取.csv文件。当我将第一个拆分更改为该变量时,我只能使该脚本识别换行符。allTextLines = allText.split(“ \ r”);之后效果很好!谢谢!

–乔
15年8月14日在12:50



#2 楼

无需编写自己的...

jQuery-CSV库具有一个称为$.csv.toObjects(csv)的函数,该函数会自动执行映射。

注意:该库旨在处理任何内容。符合RFC 4180的CSV数据,包括大多数“简单”解决方案都忽略的所有讨厌的情况。

就像@Blazemonger所述,首先您需要添加换行符以使数据有效CSV 。

使用以下数据集:

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2


使用代码:

var data = $.csv.toObjects(csv):


保存在“数据”中的输出将是:

[
  { heading1:"value1_1",heading2:"value2_1",heading3:"value3_1",heading4:"value4_1",heading5:"value5_1" } 
  { heading1:"value1_2",heading2:"value2_2",heading3:"value3_2",heading4:"value4_2",heading5:"value5_2" }
]


注意:从技术上讲,键值映射的编写方式是无效的JavaScript。包含键值对的对象应该放在方括号中。

如果您想自己尝试一下,建议您看一下“ toObjects()”下的“基本用法”演示。选项卡。

免责声明:我是jQuery-CSV的原始作者。

更新:

经编辑以使用op提供的数据集并包含指向演示的链接,在演示中可以测试数据的有效性。

Update2:

由于关闭了Google Code。 jquery-csv已移至GitHub

评论


IOW,“ toObject”是或可以被认为是“ toJSON”,不是吗?而且,对toObjects(csv)的调用后的冒号是错字吗? IOW,那不是分号吗?

– B.克莱·香农
13年7月31日在15:27

CSV是文件名吗?

–气泡
13年9月16日在8:42

很棒的图书馆。仅供参考,传递的参数csv是一个csv字符串-以文本形式读取csv文件以获取csv字符串。

– callmekatootie
2014年1月17日下午5:36

@Evan Plaice如何使用此库从csv文件读取?

–里查·辛哈(Richa Sinha)
2015年6月4日13:15

@RichaSinha通过HTML5 File API或AJAX作为文本缓冲区读取文件。然后将字符串缓冲区传递到解析器。结果将吐出数据数组。有关示例,请参见项目页面。

–伊文·普莱斯
2015年9月8日在16:39

#3 楼

不要用逗号分开-它不适用于大多数CSV文件,并且这个问题对于请求者的输入数据有太多观点,以至于无法应用于所有人。解析CSV有点吓人,因为还没有真正的官方标准,而且很多定界的文本编写者都没有考虑边缘情况。

这个问题很老了,但我相信,既然Papa Parse有了更好的解决方案可用。这是我在贡献者的帮助下编写的一个库,用于解析CSV文本或文件。这是我所知道的唯一支持GB大小的文件的JS库。它还可以优雅地处理格式错误的输入。

1分钟即可解析1 GB文件:


(更新:使用Papa Parse 4,同一文件只用了大约在Firefox中只需30秒。PapaParse 4现在是浏览器中已知最快的CSV解析器。)

解析文本非常容易:

var data = Papa.parse(csvString);


解析文件也很容易:

Papa.parse(file, {
    complete: function(results) {
        console.log(results);
    }
});


流文件是相似的(这是流远程文件的示例):

Papa.parse("http://example.com/bigfoo.csv", {
    download: true,
    step: function(row) {
        console.log("Row:", row.data);
    },
    complete: function() {
        console.log("All done!");
    }
});


如果您的网页在解析过程中被锁定,Papa可以使用Web Worker使您的网站保持活动状态。

Papa可以自动检测定界符并将值与标题列进行匹配(如果标头行存在。它还可以将数值转换为实际的数字类型。它可以适当地分析换行符和引号以及其他奇怪的情况,甚至可以尽可能稳健地处理格式错误的输入。我从现有库中汲取了灵感来制作Papa,因此成为了其他JS实现的支撑。

评论


爸爸很容易使用并且快速!谢谢!

–技术电子
2015年1月5日13:38

+1在Papa Parse上表现出色。我希望有一天能详细研究它,看看您如何处理大文件和流媒体。我很高兴看到其他开发人员编写功能齐全的解析器,这些解析器在jquery-csv停止的地方继续使用。

–伊文·普莱斯
2015年6月6日下午1:37

@EvanPlaice谢谢。您可能喜欢我昨晚在一次本地聚会上发表的演讲:docs.google.com/presentation/d/…

–马特
15年6月6日在1:40

@ Matt那是一个很棒的演示,它以更多的理解方式描述了papa解析

–siva
15年8月25日在10:13

@ Malky.Kid无效的CSV(即,无分隔值的空格不好)。 MS Excel的CSV格式实现很糟糕。如果您仍然有权访问源文件,则应该有一个启用引号定界符的选项。完成此操作后,您的数据应可与任何csv解析器一起使用。

–伊文·普莱斯
18年1月16日在1:55

#4 楼

我正在使用d3.js解析csv文件。非常易于使用。
这里是文档。

步骤:


npm install d3-request

使用Es6;

import { csv } from 'd3-request';
import url from 'path/to/data.csv';

csv(url, function(err, data) {
 console.log(data);
})


请参阅文档以了解更多信息。

更新-
d3-request已弃用。您可以使用d3-fetch

#5 楼

这是一个JavaScript函数,用于解析CSV数据,并考虑引号内的逗号。

// Parse a CSV row, accounting for commas inside quotes                   
function parse(row){
  var insideQuote = false,                                             
      entries = [],                                                    
      entry = [];
  row.split('').forEach(function (character) {                         
    if(character === '"') {
      insideQuote = !insideQuote;                                      
    } else {
      if(character == "," && !insideQuote) {                           
        entries.push(entry.join(''));                                  
        entry = [];                                                    
      } else {
        entry.push(character);                                         
      }                                                                
    }                                                                  
  });
  entries.push(entry.join(''));                                        
  return entries;                                                      
}


该函数示例用于解析如下所示的CSV文件: />
"foo, the column",bar
2,3
"4, the value",5


到阵列中:这是可靠的第三方解决方案):

// csv could contain the content read from a csv file
var csv = '"foo, the column",bar\n2,3\n"4, the value",5',

    // Split the input into lines
    lines = csv.split('\n'),

    // Extract column names from the first line
    columnNamesLine = lines[0],
    columnNames = parse(columnNamesLine),

    // Extract data from subsequent lines
    dataLines = lines.slice(1),
    data = dataLines.map(parse);

// Prints ["foo, the column","bar"]
console.log(JSON.stringify(columnNames));

// Prints [["2","3"],["4, the value","5"]]
console.log(JSON.stringify(data));


这是此代码的有效提要。

请尽情享受! -柯伦

#6 楼

您可以使用PapaParse来提供帮助。
https://www.papaparse.com/

这里是CodePen。
https://codepen.io/sandro-wiggers/笔/ VxrxNJ

Papa.parse(e, {
            header:true,
            before: function(file, inputElem){ console.log('Attempting to Parse...')},
            error: function(err, file, inputElem, reason){ console.log(err); },
            complete: function(results, file){ $.PAYLOAD = results; }
        });


#7 楼

这是将外部CSV读取到Javascript中(使用jQuery)的另一种方法。简单的故障排除。

可能会帮助别人。

数据文件示例:

Time,data1,data2,data2
08/11/2015 07:30:16,602,0.009,321


这是代码:

$(document).ready(function() {
 // AJAX in the data file
    $.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text",
        success: function(data) {processData(data);}
        });

    // Let's process the data from the data file
    function processData(data) {
        var lines = data.split(/\r\n|\n/);

        //Set up the data arrays
        var time = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        var headings = lines[0].split(','); // Splice up the first row to get the headings

        for (var j=1; j<lines.length; j++) {
        var values = lines[j].split(','); // Split up the comma seperated values
           // We read the key,1st, 2nd and 3rd rows 
           time.push(values[0]); // Read in as string
           // Recommended to read in as float, since we'll be doing some operations on this later.
           data1.push(parseFloat(values[1])); 
           data2.push(parseFloat(values[2]));
           data3.push(parseFloat(values[3]));

        }

    // For display
    var x= 0;
    console.log(headings[0]+" : "+time[x]+headings[1]+" : "+data1[x]+headings[2]+" : "+data2[x]+headings[4]+" : "+data2[x]);
    }
})


希望对以后的人有所帮助!

评论


你好,从将来开始,所以我尝试了这个答案,但在第45行缺少)符号,所以我添加了它,但是现在在第9行,它给了我一个控制台错误Uncaught ReferenceError:$在index.html:9上未定义你能帮忙吗?

–千层面猫
17年4月18日在17:13

#8 楼

function CSVParse(csvFile)
{
    this.rows = [];

    var fieldRegEx = new RegExp('(?:\s*"((?:""|[^"])*)"\s*|\s*((?:""|[^",\r\n])*(?:""|[^"\s,\r\n]))?\s*)(,|[\r\n]+|$)', "g");   
    var row = [];
    var currMatch = null;

    while (currMatch = fieldRegEx.exec(this.csvFile))
    {
        row.push([currMatch[1], currMatch[2]].join('')); // concatenate with potential nulls

        if (currMatch[3] != ',')
        {
            this.rows.push(row);
            row = [];
        }

        if (currMatch[3].length == 0)
            break;
    }
}


我希望正则表达式尽可能多地执行。此正则表达式将所有项目视为带引号或不带引号,然后是列定界符或行定界符。还是文本的结尾。

这就是为什么最后一个条件-如果没有它,它将是一个无限循环,因为模式可以匹配零长度字段(在csv中完全有效)。但是由于$是一个长度为零的断言,它不会进行不匹配并结束循环。似乎它在我的javascript引擎上的第一个替代方法之前执行,并将引号视为未引号值的一部分。我不会问-就是让它起作用。

评论


不幸的是,我陷入了这个功能的无限循环。

–豪克
19年8月6日在15:31

@Hauke-如果您可以将数据分解为仍然会产生无限循环的几行和几行,我将不胜感激-它可能使我更深入地了解以前为什么会失败。

– Gerard ONeill
19年8月6日在20:03

#9 楼

根据已接受的答案,

我通过将1更改为0来使它起作用:

for (var i=1; i<allTextLines.length; i++) {

for (var i=0; i<allTextLines.length; i++) {


它将计算一个具有allTextLines.length为1的连续行的文件。因此,如果循环从1开始并一直运行,且循环时间小于1,则永远不会运行。因此,空白警报框。

#10 楼

如果要在不使用Ajax的情况下解决此问题,请使用FileReader() Web API。

示例实现:


选择.csv文件
查看输出
/>



 function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }

  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
    displayParsed(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

function displayParsed(contents) {
  const element = document.getElementById('file-parsed');
  const json = contents.split(',');
  element.textContent = JSON.stringify(json);
}

document.getElementById('file-input').addEventListener('change', readSingleFile, false); 

 <input type="file" id="file-input" />

<h3>Raw contents of the file:</h3>
<pre id="file-content">No data yet.</pre>

<h3>Parsed file contents:</h3>
<pre id="file-parsed">No data yet.</pre> 




#11 楼

有点晚了,但我希望它能对某人有所帮助。
前一段时间,甚至我遇到了一个问题,即字符串数据之间包含\n,同时读取文件时读取的内容也不同。 br />
"Harry\nPotter","21","Gryffindor"

阅读时:
Harry
Potter,21,Gryffindor

我在我的angular项目中使用了库csvtojson解决此问题。
您可以使用字符串形式读取CSV文件以下代码,然后将该字符串传递到csvtojson库,它将为您提供JSON列表。
示例代码:
 const csv = require('csvtojson');
if (files && files.length > 0) {
    const file: File = files.item(0);
    const reader: FileReader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e) => {
    const csvs: string = reader.result as string;
    csv({
        output: "json",
        noheader: false
    }).fromString(csvs)
        .preFileLine((fileLine, idx) => {
        //Convert csv header row to lowercase before parse csv file to json
        if (idx === 0) { return fileLine.toLowerCase() }
        return fileLine;
        })
        .then((result) => {
        // list of json in result
        });
    }
}
  

#12 楼

$(function() {

      $("#upload").bind("click", function() {
            var regex = /^([a-zA-Z0-9\s_\.\-:])+(.csv|.xlsx)$/;
            if (regex.test($("#fileUpload").val().toLowerCase())) {
              if (typeof(FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var customers = new Array();
                    var rows = e.target.result.split("\r\n");
                    for (var i = 0; i < rows.length - 1; i++) {
                      var cells = rows[i].split(",");
                      if (cells[0] == "" || cells[0] == undefined) {
                        var s = customers[customers.length - 1];
                        s.Ord.push(cells[2]);
                      } else {
                        var dt = customers.find(x => x.Number === cells[0]);
                        if (dt == undefined) {
                          if (cells.length > 1) {
                            var customer = {};
                            customer.Number = cells[0];
                            customer.Name = cells[1];
                            customer.Ord = new Array();

                            customer.Ord.push(cells[2]);
                            customer.Point_ID = cells[3];
                            customer.Point_Name = cells[4];
                            customer.Point_Type = cells[5];
                            customer.Set_ORD = cells[6];
                            customers.push(customer);
                          }
                        } else {
                          var dtt = dt;
                          dtt.Ord.push(cells[2]);

                        }
                      }
                    }


评论


尽管这段代码可以解决问题,但包括解释如何以及为什么解决该问题的说明,确实可以帮助提高您的帖子质量,并可能导致更多的投票。请记住,您将来会为读者回答问题,而不仅仅是现在问的人。请编辑您的答案以添加说明,并指出适用的限制和假设。来自评论

–双响
5月24日18:05

#13 楼

实际上,您可以使用名为any-text的轻量级库。

安装依赖项

npm i -D any-text


使用自定义命令读取文件

 var reader = require('any-text');
 
reader.getText(`path-to-file`).then(function (data) {
  console.log(data);
});
 

或使用async-await:
 var reader = require('any-text');
 
const chai = require('chai');
const expect = chai.expect;
 
describe('file reader checks', () => {
  it('check csv file content', async () => {
    expect(
      await reader.getText(`${process.cwd()}/test/files/dummy.csv`)
    ).to.contains('Lorem ipsum');
  });
});
 


评论


您不需要一切

–罗格·史密斯
7月24日5:17