使用 vanilla JS 之后使用 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

當您調用new Option()時，您的問題在於您的map()調用。

根據MDN 上的Option()語法，Option 構造函數中的第一個參數是要顯示的文本，第二個參數是選擇給定選項時 select 選項應指向的數據。 由於您的key實際上只是一個數組索引，因此您當前的代碼正在做的是將 object 顯示為“文本”（ [object Object] ），並在選擇時將索引作為數據傳遞。

改變

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

至

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

解決您的問題。 JSON.stringify()是必需的，因為value 屬性僅支持字符串（沒有它，字符串[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 之后使用 API 中的數據填充 select（下拉）。

問題描述

1 個解決方案

解決方案1
3 已采納 2020-07-07 23:14:48

使用 vanilla JS 之后使用 API 中的數據填充 select（下拉）。

問題描述

1 個解決方案

解決方案1 3 已采納 2020-07-07 23:14:48

解決方案1
3 已采納 2020-07-07 23:14:48