Как отработать данную ссылку на клиенте?

Выводится только страница с json, например если я написал в поиск: "костюм", то выводится:

[{"img":["/big-size/IMG_2256.jpg","/big-size/IMG_2257.jpg","big-size/IMG_2264.jpg"],"sizes":["S"],"_id":"5f5cbd7b42616a8e9d4a4ce0","title":"Серый костюм","description":"text","nowPrice":6000,"oldPrice":0,"sale":0,"mainSize":"big"},{"img":["/big-size/IMG_2297.jpg","/big-size/IMG_2298.jpg","/big-size/IMG_2299.jpg"],"sizes":["S"],"_id":"5f5cbeac42616a8e9d4a4ce3","title":"Белый костюм","description":"text","nowPrice":10000,"oldPrice":0,"sale":0,"mainSize":"big"}]

а должна выводится страница shop с товарами, которые я передал на клиенте.

products.js (server):

router.get('/products', async(req, res) => {
    const searchField = req.query.search;

    Product.find({ title: { $regex: searchField.toString(), $options: '$i' } })
        .then(data => {
            res.status(200).json(data);
        })
})

script.js (client):

const headerSearchTest = document.querySelector('.header-search-test');

headerSearchTest.addEventListener('keydown', event => {
    const searchValue = event.target.dataset.search;

    if (event.keyCode === 13) {
        fetch(`/shop/products?search=${searchValue}`)
            .then(res => res.json())
            .then(searchProducts => {
                if (searchProducts.products.length) {
                    const listCards = document.querySelector('.list-cards');

                    const html = searchProducts.products.map(product => {
                        return `
                            <li class="card" data-size="${product.mainSize}">
                                <a href="/shop/${product.id}" title="${product.title}">
                                    <div class="card__block-img">
                                        <figure>
                                            <img src="${product.img[0]}" alt="${product.title}">
                                        </figure>
                                    </div>
                                    <div class="card__description">
                                        <span class="card-               name">${product.title}</span>
                                        <div class="card__block-price">
                                            <span class="card-old-price">${product.oldPrice}</span>
                                            <span class="card-now-price">${product.nowPrice}</span>
                                            <span class="card-sale">${product.sale}%</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        `
                    }).join('');

                    listCards.innerHTML += html;
                } else {
                    listCards.innerHTML = `
                        <h1>Товаров не найдено</h1>
                    `;
                }
            })
            .catch(err => alert(err))
    }
})

Сам поиск в html (pug) выглядит так:

form(action="/shop/products" method="GET")
  input(class="header-search-test" name="search" id="search" data-search="search" type="text")
  span поиск


Ответы (0 шт):