Как отфильтровать схему в mogodb и перенаправить ту же страницу с отфильтрованными данными

Question

Я делаю веб-сайт, и мне нужно отфильтровать продукт по типу, у меня есть коллекция mongodb с идентификатором, именем, ценой и типом, и идея состоит в том, чтобы показать весь продукт, а когда пользователь нажимает на правое меню, отображается указанный типна той же странице, изменяя содержимое

это для показа всех продуктов

<% for(var i =0; i < listaProducto.length; i++) { %>
    <div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
        <!-- Block2 -->
        <div class="block2">
            <div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
                <img src= " <%= listaProducto[i].ruta %> ">

                <div class="block2-overlay trans-0-4">
                    <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
                        <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
                        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
                    </a>

                    <div class="block2-btn-addcart w-size1 trans-0-4">
                        <!-- Button -->
                        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

            <div class="block2-txt p-t-20">
                <a href="product-detail.html" class="block2-name dis-block s-text3 p-b-5" id="nombreProducto">
                    <%= listaProducto[i].nombre %>
                </a>

                <span class="block2-price m-text6 p-r-5">
                        <%= listaProducto[i].precio %>
                </span>
            </div>
        </div>
    </div>

<% } %>

нужное меню

<ul class="p-b-54">
    <li class="p-t-4">
        <a href="product" class="s-text13 active1">
            Ver Todo
        </a>
    </li>

    <li class="p-t-4">
        <a href="product?<tipo=impresora>" class="s-text13 active1">
            Impresoras
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-etiquetadoras.html" class="s-text13 active1">
            Etiquetadoras
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-etiquetas-autoadhesivas.html" class="s-text13 active1">
            Etiquetas Autoadhesivas
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-marquillas.html" class="s-text13 active1">
            Marquillas
        </a>
    </li>
</ul>

здесь находится страница получения

router.get('/product', async (req, res, next) => {
  const listaProducto = await prodcutos.find();
  res.render('product',{
    listaProducto
  });
});

и схема

const mongoose = require('mongoose');
const bcrypt = require('bcrypt-nodejs');

const { Schema } = mongoose;

const productSchema = new Schema({
  id: String,
  nombre: String,
  tipo: String,
  precio: String,
  ruta: String
});
var producto = module.exports = mongoose.model('products', productSchema);

Я хочу, чтобы, когда пользователь щелкает элемент списка в правом меню, отображались продукты этого типа на той же странице, меняющие содержимое (может быть сза)

Answer 1

я решил это, только сделал еще один переход на маршруты и изменил href следующим образом (также я добавляю нумерацию страниц и причину использования: страница)

router.get('/product/type/:tipo/:page', async (req, res, next) => {
  const tipo = req.params.tipo;
  let perPage = 6;
  let page = req.params.page || 1;
  productos.find({ "tipo": tipo })
  .skip((perPage*page)-perPage)
  .limit(perPage)
  .exec((err, listaProducto) =>{
    productos.find({ "tipo": tipo }).count((err, count) =>{
      if(err) return next(err);
      res.render('product',{
       listaProducto,
       current : page,
       pages : Math.ceil(count / perPage),
       total: count,
       typeIn: tipo
      });
    })
  })
});

и меню Rigth

<ul class="p-b-54">
                        <li class="p-t-4">
                            <a href="/product/1" class="s-text13 active1"> 
                                Ver Todo
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/impresora/1" class="s-text13 active1">  
                                Impresoras
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/etiquetadora/1" class="s-text13 active1">
                                Etiquetadoras
                            </a>
                        </li> 

                        <li class="p-t-4">
                            <a href="/product/type/etiqueta/1" class="s-text13 active1">
                                Etiquetas Autoadhesivas
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/marquilla/1" class="s-text13 active1">
                                Marquillas
                            </a>
                        </li>
                    </ul>