通过外键创建一个对象而不属于另一个对象并分配它

问题描述

我在创建项目并为其所属类别分配 ID 时遇到问题。抱歉下面的代码太长了，希望我能找到一些答案。

class Item {
  constructor(attributes) {
    let whitelist = ["id","name","quantity","color","details","category_id"]
    whitelist.forEach(attr => this[attr] = attributes[attr])
  }

    static container(){
      return this.c ||= document.querySelector("#itemsTable")
    }
   

    static all(){
      return fetch("http://localhost:3000/items",{
        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(itemArray => {
        this.iCollection = itemArray.map(attrs => new Item(attrs))
        let itemList = this.iCollection.map(item => item.render())
        this.container().append(...itemList)
        return this.iCollection
      })
    }
    
    static findById(id) {
     return this.collection.find(item => item.id == id);
    }

    static create(formData) {
    return fetch("http://localhost:3000/items",{
      method: 'POST',headers: {
        "Accept": "application/json","Content-Type": "application/json"
      },body: JSON.stringify({item: formData})
    })
      .then(res => {
        if(res.ok) {
          return res.json() 
        } else {
          return res.text().then(error => Promise.reject(error)) 
        }
      })

      .then(itemAttributes => {
        let itemListed = new Item(itemAttributes);
        this.iCollection.push(itemListed);
        this.container().appendChild(itemListed.render());
        new FlashMessage({type: 'success',message: 'New item added successfully'})
        return itemListed;
      })

      .catch(error => {
        new FlashMessage({type: 'error',message: error});
        console.error(error)
      })
  }

  
  render() {
   this.element ||= document.createElement('tr');
   this.element.classList.add(..."min-w-full divide-y divide-gray-200".split(" "));

   this.nameTd  ||= document.createElement('td');
   this.nameTd.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider".split(" "));
   this.nameTd.textContent = this.name;

   this.quantityTd  ||= document.createElement('td');
   this.quantityTd.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider".split(" "));
   this.quantityTd.textContent = this.quantity;
   
   this.colorTd  ||= document.createElement('td');
   this.colorTd.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider".split(" "));
   this.colorTd.textContent = this.color;

   this.detailsTd  ||= document.createElement('td');
   this.detailsTd.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider".split(" "));
   this.detailsTd.textContent = this.details;

   this.element.append(this.nameTd,this.quantityTd,this.colorTd,this.detailsTd );

   return this.element;

  }


}

class FlashMessage {
  constructor({type,message}){
    this.message = message;
    this.color = type == "error" ? 'bg-red-200' : 'bg-green-100'
  }

  static container(){
    this.c ||= document.querySelector('#flash')
  }

  render(){
    this.container().textContent = this.message;
    this.container().classList.toggle(this.color);
    this.container().classList.toggle('opacity-0');
  }
}

这是我用于库存应用的项目类。这个类属于我后端的一个类别。如何在创建时将此类别 ID 分配给项目？我是初学者，我的学校项目审查将于下周到期。现在我正在将 id 硬代码传递到项目的 HTML 表单中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）