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>

这里，menu 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在烧瓶中执行此操作，但我正在尝试学习javascript。目标是将csv数据读入下拉菜单。

Answer 1

CSV下拉列表

如果您想要读取数据并将其作为选项访问，问题中给定，您可以通过ajax请求获取文件并成功获取，您可以处理您的请求！

＆＃13;

$(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]));
  }
}

＆＃13;

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

＆＃13;

CSV到html表格

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

您可以从here

下载

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以参考this了解更多信息！

将csv数据加载到HTML div中

1 个答案: