Фильтрация данных мангусты на стороне клиента с помощью EJS на основе выпадающего списка - PullRequest
Новая
       19

Фильтрация данных мангусты на стороне клиента с помощью EJS на основе выпадающего списка

0 голосов
/ 29 июня 2019

Новичок работает над моим первым проектом здесь.

У меня есть 2 схемы и модели Mongoose, содержащие categories и products. Я вложил products в модель categories.

С помощью Node и Express я отправляю все категории на свою страницу. Используя EJS и цикл for, я могу сделать выпадающий (выбрать) список со всеми именами категорий.

Теперь мне не удается составить список со всеми продуктами, содержащимися в выбранных категориях.

Я прошел путь от попытки отфильтровать его внутри тегов EJS до объединения внешнего скрипта и отправки запроса POST AJAX с выбранными данными. Ничего не сработало. 

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 голосов
/ 01 июля 2019

Я бы посоветовал вам использовать 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>
...