Need to import CSV into html/javascript and use in a datalist

Question

I'm teaching myself to code in html/css/javascript to help improve my own efficiency at my job (I enroll grad students at a university and currently it's all done on paper. I want to take this to a web page so it's easier for everyone involved)

My apologies, this is a little messy:

.Add {
  overflow: auto;
  display: inline-block;
  padding: 10px;
  width: calc(65% - 10px);
  border: 1px solid;
  background-color: rgba(255, 255, 255, .75)
}

.Add input {
  width: 100%;
  vertical-align:top;
}

.Add button {
  margin:10px;
  margin-left: 44px;
}

.Add td {
  border: 1px solid;
}

      <div class="CourseInfo">
        <div class="Add">
          <span>
        COURSES TO BE ADDED:
 <table>
        <tbody>
          <tr>
            <th style="width: 5%">Class #</th>
            <th style="width: 40%;">Course Title</th>
            <th style="width: 20%;">Catalog Number</th>
            <th style="width: 10%;">Units/ Credits</th>
            <th style="width: 5%;">*Days</th>
            <th style="width: 5%;">*Time</th>
            <th style="width: 5%;">*Bldg/Rm</th>
            <th style="width: 10%;">Variable Credits?</th>
          </tr>
        <div id="courseTable">
          <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </div>
         <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
         <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr> 
        <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>##</td>
            <td><input list="courses" name="course" placeholder="Course">
  <datalist id="courses">
    <option value="a Class 1">
    <option value="a Class 2">
    <option value="b Class 3">
    <option value="b Class 4">
    <option value="Class 5">
  </datalist></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>

Here is the full fiddle I'm working in: https://jsfiddle.net/frodomeg/0kLmoan4/

In the section that displays the courses to be added or dropped (in the snippet), I have a stand-in datalist. What I would like to be able to do is import our department's course list for the upcoming term (which I download from our department site into a .xls file and then convert to .csv) and have those displayed in the datalist for students to choose from.

Now, it doesn't have to be a .csv if there is something better out there, I'm just not sure what else would work.

Because I'm so new to this whole thing and writing it entirely in fiddle before I send it to my boss for approval to start production, it would be most helpful if I could do this without downloading any outside programs. Or if I have to download via outside program, could you tell me how to add it to fiddle?

Any help is greatly appreciated!

Thanks

csv is a good choice, however, they can be messy in javascript. check out this answer for a more in-depth demonstration how this can be done. https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript — bowl0stu, Jun 29 '18 at 18:07
I did take a look at that thread, but I'm not sure how I would take that and then reference the data in the html datalist. Any thoughts on how that's done? — Doodlebug, Jun 29 '18 at 18:21

score 0 · Answer 1 · answered Jun 29 '18 at 18:28

This need to me sounds like something that would be more fitting for a server-side language like PHP than a client-side language like Javascript.

With a server-side language, you can easily access files on your server (and this will allow you easily to edit the file when necessary without the need for additional code), such as this CSV, parse it and render it as part of your webpage for the user.

For example, here's working PHP code for your use case:

<?php

$filename = "test.csv"; //example name for your CSV file with classes - this file would exist in the same directory as this PHP file
$classArray = array(); //declare an array to store your classes

if (($handle = fopen($filename, "r")) !== FALSE) {

while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
    foreach($data as $v) { //loop through the CSV data and add to your array
    array_push($classArray, $v);         
    }
  }    
}
?>

<div class="CourseInfo">
<div class="Add">
<span>
COURSES TO BE ADDED:
<table>
<tbody>
<tr>
<th style="width: 5%">Class #</th>
<th style="width: 40%;">Course Title</th>
<th style="width: 20%;">Catalog Number</th>
<th style="width: 10%;">Units/ Credits</th>
<th style="width: 5%;">*Days</th>
<th style="width: 5%;">*Time</th>
<th style="width: 5%;">*Bldg/Rm</th>
<th style="width: 10%;">Variable Credits?</th>
</tr>
<div id="courseTable">
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) { // this is embedded PHP that allows you to loop through your array and echo the values of the PHP array within an HTML option tag
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php 

for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";    
}

?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

I would assume that if you're planning to have users/students visit a webpage, you have a web server in mind to host your files. If you don't currently have PHP on the web server, it shouldn't be difficult to install it. Here's a link from PHP.net describing how to install PHP on several different OS's:

http://php.net/manual/en/install.php

You're welcome! I recognize that I didn't directly answer your question, but I thought it wouldn't hurt to present you with a different (and possibly simpler) option to do this. As the user who commented on your original post noted, this can be done in Javascript, but doing so is often messy and not entirely intuitive. PHP of course is not the only option - just happens to be one that I'm quite familiar with. Assuming you're not opposed to using Javascript libraries, there are several jQuery plugins that may help: https://github.com/evanplaice/jquery-csv https://www.papaparse.com/ — Fillard Millmore, Jun 29 '18 at 18:51

score 0 · Answer 2 · answered Jun 29 '18 at 19:02

This is not a solution but a suggestion that you can reuse the same datalist for all the input. My two cents. The link below shows that you don't really need so many instances of the same datalist.

https://jsfiddle.net/0kLmoan4/7/

<tr>
        <td>##</td>
        <td><input list="courses" name="course" placeholder="Course">
        <datalist id="courses">
        <option value="a Class 1">
        <option value="a Class 2">
        <option value="b Class 3">
        <option value="b Class 4">
        <option value="Class 5">
        </datalist></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>##</td>
        <td><input list="courses" name="course" placeholder="Course">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

Secondly, CSV sounds fine. As long as you can read it. Now once you have read it in a javascript variable, following the tutorial above as suggested by "bowl0stu" in one of the comments.

You can use a loop to generate all the datalist options on the go. If you can share what would be the structure of your CSV. I can provide you a pseudo code of how to generate the html for datalist with all the options generated dynamically.

Oh thank you! I was wondering how I could clean that up. And my CSV will look something like this: Choose your Course,course1,course2,course3... — Doodlebug, Jun 29 '18 at 19:37

score 0 · Answer 3 · answered Jun 29 '18 at 22:07

FileReader is new in HTML5 I guess. Here is a model for loading a table from a CSV file.

<html>
<head>
<style>
td { width:100px; border:1px solid black; }
</style>
<script>
  "use strict";
function doit1() {
/* this assumes the file selected is like:
alpha, 12345
beta, 98765
*/
  var file = document.getElementById('fileid').files[0]; // selected file
  // you can't hard code the file -- user has to select it.
  var reader = new FileReader(); // new in HTML5
  reader.onload = function(e) { // this is the async function
    var elt = document.getElementById("tbldiv"); // table in this div
    var tblstr = "<table>"; // need to build whole table in string
    var recs = reader.result.split("\n"); // break file into records
    for (var irec=0; irec<recs.length; irec+=1) {
      var fields = recs[irec].split(","); // break record into fields
      tblstr += "<tr><td>" + fields[0] + "</td><td>" + fields[1] + "</td></tr>";
    }
    elt.innerHTML = tblstr + "</table>";
  } 
  reader.readAsText(file); // readAsText
}
</script>
</head>
<body>
<input type="file" id="fileid" onchange="doit1();" />
<div id="tbldiv">
</div>
</body>
</html>

Need to import CSV into html/javascript and use in a datalist

3 Answers3