仅使用一列从 csv 文件填充 HTML 选择标签 - javascript

Question

我正在尝试仅使用 csv 文件中的一列填充选择标签。

看起来我可以得到第三列，但每个选项只显示第一个字母和几个额外的“。”末尾有一个未定义。

如何解决这个问题，以便只填充该单词？

var csvFile = new XMLHttpRequest();
var select = document.getElementById('select');
csvFile.onload = function() {
  csv_Text = csvFile.responseText;
  csv_TextLines = csv_Text.split(/\r\n|\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

Answer 1

每个文本行都是一个字符串，因此

csv_TextLines[i][2]

将返回每行的第三个字符。

您需要的是用

,

进行另一次分割并从中获取第三个元素。

伪代码：

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

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

Answer 2

在循环中，如果添加

console.log(csv_TextLines[i])

，您将看到这里的每个项目都是一个字符串。您需要在每一行上运行

.split(',')

将该行按逗号字符拆分为数组

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(/\r\n|\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>

Answer 3

• 使用更简单的Fetch API
• 使用 Array.prototype.shift()
删除数据 CSV 标题
• 使用 Array.prototype.map()
构造 HTMLOptions
• 在每行上使用

  .split(",")

  检索各个单元格

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;
});