javascript - 将 csv 数据加载到 HTML div

Question

我有以下div

<div class="menu">

另外，我有一个 csv 文件，其中包含一堆名为 data.csv 的字符串。对于这个 csv 文件中的每个字符串，我想将一个 div 附加到这个菜单 div 中。例如，csv 包含以下数据:

item_id, user_name
0,user1
1,user2
2,user3

然后，我尝试将数据读入两个数组并使 HTML 如下所示:

<div class="menu">
  <div class="item" data-value="0">user1</div>
  <div class="item" data-value="1">user2</div>
  <div class="item" data-value="2">user3</div>
</div>

这里，菜单 div 中的每个 div 都有一个 item_id 的数据值，并将此 div 中的文本显示为 user_name。

我一直在尝试以下方法:

1.) Loading a CSV file into an HTML table using javascript

2.) https://www.sitepoint.com/community/t/displaying-specific-data-from-a-csv-file/208326/6

但我不是 javascript 的常客，遇到了一些麻烦。这样做的任何提示或技巧都会很棒。

当前方法:

<script>
$(document).ready(function() {
// AJAX in the data file
$.ajax({
    type: "GET",
    url: "data.csv",
    dataType: "text",
    success: function(data) {processData(data);}
    });

function processData(data) {
    var lines = data.split(/\r\n|\n/);
    var id = [];
    var name = [];
    var headings = lines[0].split(',');
    for (var j=1; j<lines.length; j++) {
    var values = lines[j].split(',');
       id.push(values[0]);
       name.push(values[1]); 
    }

}
})
</script>

我正在使用它来尝试将 csv 数据读取到 id 数组和名称数组中，但是我无法让它们创建一个字符串，该字符串具有带有类和值的 div 并将其附加到 . csv 文件中大约有 2000 个元素，所以我想知道在 javascript 中执行此操作的最佳方法。我知道如何使用 jinja2 在 flask 中执行此操作，但我正在尝试学习 javascript。目标是将 csv 数据读入下拉菜单。

Answer 1

CSV 到下拉列表

如果你想读取你的数据并将其作为一个选项访问它，在你的问题中给出，你可以使用 ajax 请求来获取你的文件并在成功获取后，你可以处理你的请求!

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "test.csv",
    dataType: "text",
    success: function(data) {
      processData(data);
    }
  });
});

function processData(allText) {
  var allTextLines = allText.split(/\r\n|\n/);
  var options = $("#options");
  for (var i = 1; i < allTextLines.length; i++) {
    var data = allTextLines[i].split(',');
    options.append($("<option />").val(data[0]).text(data[1]));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select user name: <select id='options'></select>

CSV 到 html 表格

以 test.csv 作为示例文件，您可以使用 csv to html jquery 插件!

可以从here下载

$(function() {$('#csv_data').CSVToTable('test.csv');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="jquery.csvToTable.js"></script>

CSV to html(table)<br>
<div id="csv_data">
</div>

可以引用this了解更多信息!