need to create an list of options that comes from fecth

Question

How do I fix this code to retrieve an option list where i can select only one each time.

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

right now the above code is creating a select list for each one of the categories I have.

Answer 1

So basically just need to add the actual tag to my HTML and do a 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;
  }

and this is allowing me to select each category that comes from the fetch request.