如何读取此数据并使用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>
#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 }); } }
pre >
#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
评论
如果CSV文件中没有换行符,那么任何JavaScript代码都将不可能知道一个数组(或对象)在哪里停止而另一个数组在哪里开始(除非您事先知道总是有五个标题)。这是剪切粘贴的监督吗?是的,我事先知道有五个字段。
下一个问题:解决方案中允许使用jQuery吗?您使用了标签,但是示例代码是纯JavaScript。
是的,允许使用jQuery,这就是为什么我将其包含在Tag中的原因。
我认为XMLHttpRequest不允许使用file://...。