如何使用从 api 获取的数据在 javaScript 中创建选择下拉列表

Question

在此代码中，我无法创建选择选项。获取 API 后，数据应显示为选择下拉列表的选项，并且此 for loop 未执行。

const batchTrack = document.getElementById("#batchSelect");
console.log(batchTrack);
const getPost = async () => {
const response = await fetch("http://eltp-coditas.cloudjiffy.net/batch/");
console.log(response);
const data = response.json();
return data;
};

const displayOption = async () => {
const options = await getPost();
for (option of Object.keys(options)) {
const newOption = document.createElement("option");
console.log(option);
newOption.value = option;
newOption.text = option.name;
batchTrack.appendChild(newOption);
}
};
displayOption();

Answer 1

1. 删除document.getElementById("#batchSelect");中的#
2. 为await response.json(); 添加等待，因为json() 是一个异步函数。

全部修复后，它应该可以工作。

以下示例

const batchTrack = document.getElementById("batchSelect");
console.log({ batchTrack });
const getPost = async () => {
  const response = await fetch("http://eltp-coditas.cloudjiffy.net/batch/");
  const data = await response.json();
  console.log({ data });
  return data;
};

const displayOption = async () => {
  const options = await getPost();
  for (option of options.data) {
    const newOption = document.createElement("option");
    newOption.value = option.batchName;
    newOption.text = option.batchName;
    batchTrack.appendChild(newOption);
  }
};

displayOption();

<select id="batchSelect"></select>

Answer 2

您的代码中有几个错误：

• getElementById("#batchSelect"); 在这个函数中你不需要使用#
• 您的响应对象具有包含数组的data 属性。所以你可以循环遍历数据数组。
• 在您的回复中，对象没有名为name 的属性，而是batchName

HTML：

<select id="batchSelect"></select>

脚本块：

const batchTrack = document.getElementById("batchSelect");
const getPost = async () => {
    const response = await fetch("http://eltp-coditas.cloudjiffy.net/batch/");
    console.log(response);
    const data = response.json();
    return data;
};

    const displayOption = async () => {
        const options = await getPost();
        options.data.forEach(option => {
    
            const newOption = document.createElement("option");
            console.log(option);
            newOption.value = option.batchName;
            newOption.text = option.batchName;
            batchTrack.appendChild(newOption);
    
        });
    };
    displayOption();

Answer 3

这对你有帮助。试试这个URL

    let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = 'https://api.myjson.com/bins/7xq2x';

    fetch(url)  
      .then(  
        function(response) {  
          if (response.status !== 200) {  
            console.warn('Looks like there was a problem. Status Code: ', 
              response.status);  
            return;  
          }
    
          // Examine the text in the response  
          response.json().then(function(data) {  
            let option;
        
            for (let i = 0; i < data.length; i++) {
              option = document.createElement('option');
              option.text = data[i].name;
              option.value = data[i].abbreviation;
              dropdown.add(option);
            }    
          });  
        }  
      )  
      .catch(function(err) {  
        console.error('Fetch Error -', err);  
      });