需要创建一个来自 fecth

问题描述

如何修复此代码以检索一个选项列表，其中我每次只能选择一个。

static all(){
    return fetch("http://localhost:3000/categories",{
      headers:{
        "Accept": "application/json","Content-Type": "application/json"
      }
    })
    .then(res => {
      if(res.ok){
        return res.json()
      } else{
        return res.text().then(error => Promise.reject(error))
      }
    })
    .then(categoryArray => {
      this.collection = categoryArray.map(attrs => new Category(attrs))
      let categoryList = this.collection.map(c => c.render())
      this.container().append(...categoryList)
      return this.collection
    })
  }

  
  render() {
 
   this.element ||= document.createElement('select');
   this.element.class = "container";

   this.nameOp  ||= document.createElement('option');
   this.nameOp.class = "container-category";
   this.nameOp.textContent = `Category: ${this.title}`;

   this.element.append(this.nameOp);

   return this.element;
  }

现在上面的代码正在为我拥有的每个类别创建一个选择列表。

解决方法

所以基本上只需要将实际标签添加到我的 HTML 并执行 getelemetByid

render() {
 
   this.element ||= document.getElementById('categories-Select');
   this.element.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider bg-green-600".split(" "));

   this.nameOp  ||= document.createElement('option');
   this.nameOp.class = "container-category selectCategoryid";
   this.nameOp.textContent = `Category: ${this.title}`;

   this.element.append(this.nameOp);

   return this.element;
  }

这允许我选择来自获取请求的每个类别。