it-swarm.cn

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

我的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>
167
Mahesh Thumar

注意: 我在提醒有效CSV文件中可能出现的所有“特殊情况”(例如转义引号)之前编制了此解决方案。我想给那些想要快速和肮脏的东西的人留下我的答案,但我建议 Evan的回答 准确性。


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

以下代码适用于“true”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/

104
Blazemonger

无需编写自己的...

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

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

就像@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):

'data'中保存的输出将是:

[
  { 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()'选项卡下的 Basic Usage Demonstration

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

更新:

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

Update2:

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

186
Evan Plaice

不要在逗号上拆分 - 它对大多数CSV文件都不起作用,而且这个问题对于提问者的输入数据适用于每个人的看法太多了。解析CSV有点可怕,因为没有真正的官方标准,许多分隔的文本编写者不考虑边缘情况。

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

1分钟内解析1 GB文件: Parsed 1 GB file in 1 minute

更新: 使用Papa Parse 4,同一个文件在Firefox中只用了大约30秒.Papa Parse 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工作人员来保持您的网站被动。

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

61
Matt

我正在使用 d3.js 来解析csv文件。非常好用。这是 docs

脚步:

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

请参阅 docs 了解更多信息。

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

7
Bimal Grg

这是一个解析CSV数据的JavaScript函数,可以解释引号内的逗号。

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

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

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

3
curran

根据 接受的答案

我通过在这里将1更改为0来实现此目的:

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

变成

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

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

1
Adam Grant
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引擎上的第一个替代品之前执行并将引号视为未引用值的一部分。我不会问 - 只是让它起作用。

1
Gerard ONeill

这是 将外部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]);
    }
})

希望这有助于未来的人!

1
FredFury

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

这是一个CodePen。 https://codepen.io/sandro-wiggers/pen/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; }
        });
1
Sandro Wiggers