根据下拉选择,使用EJS在客户端过滤猫鼬数据

时间:2019-06-29 13:07:02

标签: javascript html express mongoose ejs

初学者在这里从事我的第一个项目。

我有2个包含categoriesproducts的Mongoose示意图和模型。我将products嵌套在categories模型中。

使用Node和Express将所有类别发送到我的页面。通过使用EJS和for循环,我可以创建一个包含所有类别名称的下拉列表(选择)。

现在,我尝试列出包含在所选类别内的所有产品的列表时失败了。

从尝试将其过滤到EJS标记内,到结合外部脚本,再到发送带有所选数据的AJAX POST请求,我都从了。什么都没有。

The schemas

const productSchema = new mongoose.Schema ({
    image: String,
    name: {type: String, required: true},
    description: {type: String, required: true},
    category: {type: String, required: true},
    price: {type: Number, required: true}
});

const categorySchema = new mongoose.Schema ({
    name: {type: String, required: true},
    products: [{
        type: mongoose.Schema.Types.ObjectId,
        ref: "Product"
    }]
});

The route 

app.get("/proposals/create", (req, res) => {
    Category.find({}).populate("products").exec((err, cats) => {
        if(err) {
            console.log(err);
        } else {
            res.render("createproposal", {cats: cats});
            } 
    });
});

The loop

<select id="catDropdown" class="ui fluid dropdown">
   <option value="">Category</option>
      <% for(i = 0; i < cats.length; i++) { %>
        <option><%= cats[i].name %></option>  
      <% }; %>
</select>

1 个答案:

答案 0 :(得分:0)

我建议您使用optgroup,只是为了简化代码并集中数据。

<select id="catDropdown" class="ui fluid dropdown">
   <option value="">Category</option>
   <% cats.forEach(category => { %>
   <optgroup label="<%= category.name %>" >
       <% category.products.forEach(product => { %>
           <option> <%= product.name %> </option>
       <% }); %>
   </optgroup>
   <% }); %>
</select>