如何读取数据从* .CSV文件使用JavaScript?

我的CSV数据如下所示:

标题1,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文件中的“特殊情况”之前,我编制了此解决scheme,例如转义引号。 对于那些想要快速而肮脏的人,我会留下我的答案,但我build议埃文的答案是准确的。


当你的data.txt文件是一串逗号分隔的条目,没有换行符时,这个代码就可以工作:

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); } 

以下代码将在每个logging集之间换行的“真正”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/

没有必要写你自己的…

jQuery-CSV库有一个名为$.csv.toObjects(csv)的函数,自动完成映射。

注意:该库旨在处理任何符合RFC 4180的 CSV数据,包括大多数“简单”解决scheme忽略的所有令人讨厌的边缘情况。

就像@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。 包含键值对的对象应该用括号括起来。

如果你想自己尝试一下,我build议你看一下“toObjects()”标签下的基本用法演示 。

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

更新:

编辑使用该操作提供的数据集,并包含一个链接到演示数据可以testing的有效性。

UPDATE2:

由于谷歌代码closures。 jquery-csv已经转移到GitHub

不要在逗号分割 – 它不适用于大多数的CSV文件,这个问题有太多的意见,提交给每个人的input数据。 由于没有真正的官方标准,parsingCSV是有点吓人的,大量的分隔文本编写者不考虑边缘情况。

这个问题很古老,但我相信现在有一个更好的解决scheme,可以使用Papa Parse 。 这是我在撰稿人的帮助下编写的一个库,用于parsingCSV文本或文件。 这是我所知道的唯一支持文件千兆字节大小的JS库。 它也可以正常处理格式错误的input。

1分钟内parsing1 GB文件: 在1分钟内解析1 GB文件

更新:使用Papa Parse 4,同一个文件在Firefox中只需要大约30秒,Papa Parse 4现在是浏览器中最快的已知CSVparsing器 。

parsing文本非常简单:

 var data = Papa.parse(csvString); 

parsing文件也很简单:

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

stream文件是类似的(这是一个stream式传输远程文件的例子):

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

如果您的网页在parsing过程中被locking,Papa可以使用networking工作者来保持您的网站的反应。

如果标题行存在,Papa可以自动检测分隔符,并将值与标题列匹配。 它也可以将数值转换为实际的数字types。 它适当地分析换行符和引号以及其他奇怪的情况,甚至尽可能强健地处理格式错误的input。 我从现有的库中获得灵感来制作Papa,所以支持其他JS实现。

这是一个JavaScript函数,用于parsingCSV数据,用于引用内部的逗号。

 // 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; } 

使用函数来parsing一个如下所示的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)); 

以下是如何将数据转换为对象,如D3的csvparsing器 (这是一个可靠的第三方解决scheme):

 var dataObjects = data.map(function (arr) { var dataObject = {}; columnNames.forEach(function(columnName, i){ dataObject[columnName] = arr[i]; }); return dataObject; }); // Prints [{"foo":"2","bar":"3"},{"foo":"4","bar":"5"}] console.log(JSON.stringify(dataObjects)); 

这是这个代码的一个工作小提琴 。

请享用! – Curran

这是另一种读取外部CSV到Javascript (使用jQuery)的方法。

这是一个更长的啰嗦,但我觉得通过读取数据到arrays中,您可以精确地遵循该过程,并使故障排除更容易。

可能帮助别人。

数据文件的例子:

 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]); } }) 

希望这有助于未来的人!

根据接受的答案 ,

我得到这个工作,通过改变1到0在这里:

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

变成

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

它将用一个连续的行计算一个文件,使其allTextLines.length为1.因此,如果循环从1开始并且只要小于1就运行,它永远不会运行。 因此,空白警报框。

 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; } } 

我喜欢有正则expression式尽可能多的。 这个正则expression式把所有的项目都引用或不引用,然后是列分隔符或行分隔符。 或文本的结尾。

这就是为什么最后一个条件 – 没有它将是一个无限循环,因为模式可以匹配零长度字段(在csv中完全有效)。 但是由于$是一个零长度的断言,它不会进展到不匹配并结束循环。

而且仅供参考,我不得不使第二个select排除围绕价值的引用。 好像它是在我的JavaScript引擎的第一个select之前执行,并考虑引号作为未引用的价值的一部分。 我不会问 – 只是把它工作。