Javascript加载多个csv并创建全局可达数组答案

【问题标题】：Javascript load multiple csv and create global reachable arrayJavascript加载多个csv并创建全局可达数组
【发布时间】：2016-10-11 07:34:11
【问题描述】：

我需要加载很多 csv 文件。然而我正在加载这个功能。

$.ajax({
  url: 'my.csv',
  dataType: 'text',
}).done(successFunction);

然后我运行 successFunction，创建数组并使用与上面相同的代码，但使用不同的函数名称创建另一个数组，依此类推。那是很多相同的代码。加载多个csv并返回数组最简单的方法是什么？

重要我有时需要再创建一个二维数组 5 等。所以函数必须包含参数。

使用这样的函数创建数组im：

function successFunction(data) {
  var promenna = data.replace(/\n/g,";").split(";");
  var result = [];
  for (var i = 0; i < promenna.length; i+=2) {
  var line = [];
    line.push(promenna[i]);
    line.push(promenna[i+1]);
    result.push(line);
  }
  for (var i = 0; i < result.length; i += 1){
    $("#tyden" + i + "").append(result[i][0]);
    $("#tyden" + i + "kolik").append(result[i][1]);
  }
}

但是对于另一个文件，我重复基本相同的代码。我不知道如何对所有文件使用一种功能。

【问题讨论】：

您尝试过但失败了吗？还是您在找人为您编写代码？
将$.ajax 调用引用推入对象数组，并在所有文件读取完成后使用$.when 执行，并在done 回调中捕获数据。查看文档中的 ajax 示例：api.jquery.com/jquery.when

标签： javascript arrays csv

【解决方案1】：

更多的 es6 风格

var urls = ['csv1.txt', 'csv2.txt', 'csv3.txt', 'csvN.txt']
var csvArr = await Promise.all(urls.map(url => fetch(url).then(res => res.text())))

> [csvContent1, csvContent2, csvContent3, csvContentN]

【讨论】：

我很惊讶得到接受的答案，你知道你必须做些什么来支持它，对吧？

【解决方案2】：

首先，我不建议使用您自己的 CSV 解析器。这个问题已经解决了，使用a library。

问题的另一部分是“我需要使用 jQuery 通过 HTTP 加载许多文件”，这很容易。

准备文件 url 列表。
将其转换为请求列表。
- 您可以使用 jQuery 的 .then() 即时转换传入的数据。
- 在这种情况下，将其通过 CSV 解析器进行转换。
- 您可以使用 jQuery 的 .done() 在响应进入时单独处理它们。
可选：等待请求完成。
- 您可以使用 jQuery 的 .when() 来等待多个异步操作。
- 您可以使用 jQuery 的.done() 来统一处理响应。

所以：

var files = ['csv1.txt', 'csv2.txt', 'csv3.txt', 'csvN.txt'];

var requests = $.map(files, function (i, url) {
    return $.get(url).then(CSV.parse);
});

$.when.apply($, requests)
    .done(function (csvObjects) {
        // everything has loaded successfully
        $.each(csvObjects, function (i, csv) {
            // do something with each file
        });
    })
    .fail(function (jqXhr, status, error) {
        // something went wrong, handle the error
    });

必读：https://api.jquery.com/category/deferred-object/

【讨论】：