使用 vanilla JS 在 .map 之后使用来自 API 的数据填充 select（下拉）

Question

我遇到了一个问题。我正在使用类似于以下内容的代码来用数据填充 select，但我没有得到预期的结果。

let data = await response.json();
let result = data.checks.map((check) => {
  return {
    name: check.name,
    tag: check.tags,
  };
});
let hcList = document.getElementById("hclist");
Object.keys(result).map((key) => hcList.add(new Option(result[key], key)));
return result;
}
getHcList().then((result) => console.log(result));

select 填充但看起来像这样

控制台中的结果数据如下所示：

0: {name: "some name", tag: "some tag"}
1: {name: "some name1", tag: "some tag1"}
2: {name: "some name2", tag: "some tag2"}

我只想填写这个 select 的名称。 - 必须使用香草 JS。

Answer 1

您的问题出在您的 map() 调用中，当您调用 new Option().

根据 Option() syntax on MDN，Option 构造函数中的第一个参数是要显示的文本，第二个参数是选择给定选项时 select 选项应指向的数据。由于您的 key 实际上只是一个数组索引，您当前的代码所做的是将对象显示为“文本”([object Object])，并在 selected 时将索引作为数据传递。

改变

hcList.add(new Option(result[key], key))

至

hcList.add(new Option(result[key].name, JSON.stringify(result[key])))

解决您的问题。 JSON.stringify() 是必需的，因为 value attribute only supports strings（没有它，字符串 [object Object] 将被存储为您的值！）。

let result = [
  {name: "some name", tag: "some tag"},
  {name: "some name1", tag: "some tag1"},
  {name: "some name2", tag: "some tag2"}
];

let hcList = document.getElementById("hclist");
Object.keys(result).map((key) => hcList.add(new Option(result[key].name, JSON.stringify(result[key]))));

//Event listener to display value attribute for clarity
hcList.addEventListener("input", () => document.getElementById("optionData").innerHTML = hcList.value);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <select id="hclist"></select>
  <p>Selected:</p>
  <p id="optionData"></p>
</body>
</html>

旁注：如果您知道传入的数据是数组格式，这似乎是您的格式，因为您提供的控制台日志在对象前面列出了索引，您可以简化 Object.keys(result).map()调用 result.map()，像这样：

result.map((key) => hcList.add(new Option(key.name, JSON.stringify(key))));
// 'key' is now each object element, rather than an index

使用 vanilla JS 在 .map 之后使用来自 API 的数据填充 select（下拉）

Populate select (drop down) with data from API after .map using vanilla JS

javascript

api

fetch

drop-down-menu