Question 231553 in Html Question posted in
Some basic documentation can be found here.

Populate HTML select tag from csv file with one column only – javascript

I am attempting to populate a selection tag with just one column from a csv file.

It looks like I can get the 3rd column, but only the first letter appears for each option and a couple extra "." with an undefined at the end.

How to fix this so just the word is populated?

enter image description here

var csvFile = new XMLHttpRequest();
var select = document.getElementById('select');
csvFile.onload = function() {
  csv_Text = csvFile.responseText;
  csv_TextLines = csv_Text.split(/rn|n/);
  var string = "";
  for (var i = 0; i < csv_TextLines.length; i++) {
    string = string + "<option>" + csv_TextLines[i][2] + "</option>"
  }

  document.getElementById('select').innerHTML = string;
}

csvFile.open("get", "export.csv", true);
csvFile.send();
<h1>hello</h1>
<select name="select" id="select">select...</select>
id,first_name,color,age,price
1,Richard,Blue,27,126.95
2,Layla,Russian violet,41,23.99
3,Kimberly,Rose ebony,48,172.95
4,Emily,Heliotrope,46,86.99
5,Anna,French lime,49,117.99
6,Julian,Dartmouth green,22,92.99
7,Jeremy,Blue,66,142.95
8,Jeremy,Fuchsia,43,36.95
9,Jennifer,Languid lavender,51,161.95
10,Evelyn,Blue,47,186.99
Tags:

3

Answers


  1. 0

    Each text line is a string, so csv_TextLines[i][2] will return the 3rd character of each line.

    What you need is another split with , and getting the 3rd element from it.

    Pseudo-code:

    ...
for (const i = 0; i < csv_TextLines.length; i++) {
  const values = csv_TextLines[i].split(',');

  if (values?.[2]) { // checks if values is defined and the 3rd value exists
    string = string + "<option>" + values[2] + "</option>"
  }
}
...
    Login or Signup to reply.
  2. 0

    Within the loop if you add console.log(csv_TextLines[i]) you will see that each item here is a string. You need to run .split(',') on each line to split that line up by the comma characters into an array

    var csv_Text = `id,first_name,color,age,price
1,Richard,Blue,27,126.95
2,Layla,Russian violet,41,23.99
3,Kimberly,Rose ebony,48,172.95
4,Emily,Heliotrope,46,86.99
5,Anna,French lime,49,117.99
6,Julian,Dartmouth green,22,92.99
7,Jeremy,Blue,66,142.95
8,Jeremy,Fuchsia,43,36.95
9,Jennifer,Languid lavender,51,161.95
10,Evelyn,Blue,47,186.99`;

var csv_TextLines = csv_Text.split(/rn|n/);
var options = "";
for (var i = 0; i < csv_TextLines.length; i++) {
  var row = csv_TextLines[i];
  var columns = row.split(',');
  options += "<option>" + columns[2] + "</option>"
}

document.getElementById('select').innerHTML = options;
    <h1>hello</h1>
<select name="select" id="select">select...</select>
    Login or Signup to reply.
  3. 0 
    fetch("export.csv").then(res => res.text()).then(data => {
  const rows = data.split(/r?n/).shift(); // .shift() to remove headers
  const HTMLOptions = rows.map(row => {
    const cells = row.split(",");
    return `<option>${cells[1]}</option>`;
  });
  document.getElementById('select').innerHTML = HTMLOptions;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search