Loading csv data into HTML div

Question

I have the following div

<div class="menu">

Additionally, I have a csv file that contains a bunch of strings called data.csv. For each string in this csv file I want to append a div into this menu div. For example say the csv contains the following data:

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

Then, I am trying to read the data into two arrays and make the HTML look as follows:

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

Here, each div inside the menu div has a data-value of the item_id and shows the text in this div as the user_name.

I have been trying approaches such as:

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

but I am not a frequent javascript user and am having some trouble. Any tips or tricks for doing so would be great.

Current Approach:

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

I am using this to try and read the csv data into the id array and the name array, but am having trouble getting these to create a string that has the div with class and value and append it to the . There are about 2000 items in the csv file so I am wondering the best way to do this in javascript. I know how to do this in flask using jinja2, but am trying to learn javascript. The goal is to read the csv data into a dropdown menu.

Show us what you have already done

ggdx
– ggdx

2017-05-10 13:10:48 +00:00
Commented May 10, 2017 at 13:10 — ggdx
– ggdx, Commented May 10, 2017 at 13:10
Added what I am trying right now!

Mike El Jackson
– Mike El Jackson

2017-05-10 20:26:11 +00:00
Commented May 10, 2017 at 20:26 — Mike El Jackson
– Mike El Jackson, Commented May 10, 2017 at 20:26

Community · Accepted Answer · 2017-05-23 12:02:39Z

2

CSV to dropdown

If you want to read you data and access it as an option, a given in your question, you can user ajax request to fetch your file and on successfully fetching, you can process your request!

$(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 to html table

With test.csv as your sample file, you can use csv to html jquery plugin!

You can download it from 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>

You can refer this for more info!

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 10, 2017 at 13:54

Keerthana Prabhakaran

3,8071 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike El Jackson Over a year ago

Does this only work for tables or can I create a custom div to put in my menu div from it?

Keerthana Prabhakaran Over a year ago

I've edited my answer to get the data to a dropdown menu!

Collectives™ on Stack Overflow

Loading csv data into HTML div

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related