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

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

我对javascripting和html知之甚少（仍在学习中），因此非常感谢任何简单的帮助

如何从我的服务器上读取CSV文件（目前正在使用localhost）

如何解析此CSV文件并将每一行添加为下拉列表的条目

谢谢

如何从我的服务器上读取CSV文件（目前正在使用localhost）

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

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

如何解析此CSV文件并将每一行添加为下拉列表的条目

这可以通过

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

}());

（函数（）{
var csv_path=“data/sample.csv”，
var renderCSVDropdown=函数（csv）{
var dropdown=$（'select#my dropdown'）；
对于（变量i=0；i

---

请注意，此代码调用了一个

CSVToArray

方法，您还必须在代码中定义该方法。感谢Ben Nadel，可以在这里找到一个实现：

我可以让控制台显示RECORD对象，下拉列表似乎充满了空行，但RECORD.someProperty是什么？这应该是一个列名吗对于CSV或其他我应该交换的对象名称，我建议在浏览器的DevTool中创建

节点的行上设置一个断点，并使用DevTool的控制台或监视窗口显示

记录的结构（这将特定于CSV文件）。这是一个正在工作的JSFIDLE。控制台记录记录记录对象，但似乎无法通过CSV中的列名获取任何信息：如果设置断点（或检查控制台中记录的数据），您会注意到CSV文件的第一行实际上列出了CSV文件的列名。您可以处理
CSV[0]
作为列列表，而
csv[1…n]
作为实际数据行。一个简单的算法可以将行的值列表转换为一个字典（map）对象，您可以使用列名将其索引。工作小提琴：