javascript - 从服务器读取 CSV 并将内容放入 html 或 javascript 的下拉列表中

Question

我的服务器上有一个 csv 文件(使用 Apache 2)，我想在加载网页时“读取”该文件。阅读内容后(两列以逗号分隔)，我想让一列是下拉列表的显示内容，另一列是“数据”内容。例如，如果我有一个 csv，其中第一行是 [1,"me"]，我希望向用户显示“me”，而 1 是我可以理解的数据(选定值)。

我对 javascript 和 html 知之甚少(仍在学习中)，因此非常感谢任何简单的帮助。回顾一下:

1. 如何从我的服务器(目前正在做本地主机)读取 CSV 文件？
2. 如何解析此 CSV 文件并将每一行添加为下拉列表的条目？

谢谢!

Answer 1

1. How do I read CSV file off my server (currently doing localhost)?

首先，您需要从 CSV 文件中获取数据，以便将其作为原生 JavaScript 对象使用。使用 jQuery 的 $.get()方法，您可以向服务器发出异步请求并等待响应。它看起来像这样:

$.get(csv_path, function(data) {
    var csv_string = data;
        //Do stuff with the CSV data ...
});

2. How do I parse this CSV file and add each row as an entry of a dropdown list?

这可以通过 for 循环和一些 jQuery 来完成:

(function() {

    var csv_path = "data/sample.csv",

    var renderCSVDropdown = function(csv) {
        var dropdown = $('select#my-dropdown');
        for(var i = 0; i < csv.length; i++) {
            var record = csv[i];
            var entry = $('<option>').attr('value', record.someProperty);
            dropdown.append(entry);
        }
    };

    $.get(csv_path, function(data) {
        var csv = CSVToArray(data);
        renderCSVDropdown(csv);
    });

}());

请注意，此代码调用 CSVToArray 方法，您还必须在代码中定义该方法。在这里可以找到一个实现，感谢 Ben Nadel:Javascript code to parse CSV data