1

I have a csv file sitting on my server (using Apache 2) which I would like to "read" when a webpage loads. After reading the contents (two columns that are comma separated), I want to have one column be the display contents of a drop down list and the other column be the "data" contents. For instance, if I had a csv where the first row was [1,"me"], I would want the "me to be displayed to the user and the 1 to be the data that I could understand (selected value).

I know very little on javascripting and html (still learning), so any simple help would be much appreciated. To recap:

  1. How do I read CSV file off my server (currently doing localhost)?
  2. How do I parse this CSV file and add each row as an entry of a dropdown list?

Thanks!

mcfly
  • 1,151
  • 4
  • 33
  • 55

1 Answers1

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

First, you'll need to fetch the data from the CSV file so you can work with it as a native JavaScript object. Using jQuery's $.get() method, you can make an asynchronous request to the server and wait for the response. It would look something like this:

$.get(csv_path, function(data) {
    var csv_string = data;
        //Do stuff with the CSV data ...
});
  1. How do I parse this CSV file and add each row as an entry of a dropdown list?

This can be accomplished with a for loop and some 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);
    });

}());

Note that this code calls a CSVToArray method, which you must also define in your code. An implementation can be found here, thanks to Ben Nadel: Javascript code to parse CSV data

Community
  • 1
  • 1
Michael Zalla
  • 804
  • 1
  • 5
  • 14
  • I can get the console to show the RECORD object, and the drop-down seems to be filling up with empty rows, but what is the record.someProperty - is that supposed to be a column name of the CSV, or other object name I'm supposed to swap out? – DPSSpatial Aug 02 '17 at 20:51
  • I would suggest setting a breakpoint in your browser's DevTools at the line which creates the ` – Michael Zalla Aug 02 '17 at 22:59
  • Here's a working jsfiddle. The console logs the RECORD object, but can't seem to get at anything by the COLUMN name in the CSV: https://jsfiddle.net/yz951hsj/ – DPSSpatial Aug 03 '17 at 17:04
  • If you set a breakpoint (or inspect the data logged in console), you'll notice that the first "row" of the CSV file actually lists the column names for your CSV file. You can treat `csv[0]` as your list of columns, and `csv[1…n]` as your actual data rows. A straightforward algorithm can convert a row's list of values to a dictionary (map) object that you can index into using column names. Working fiddle: https://jsfiddle.net/tz44aa7L/5/ – Michael Zalla Aug 05 '17 at 04:46