Javascript Filter by Category

Asked

Viewed 61 times

0

Hello, I have a problem making a category filter, in a store page, there are several categories, the items and the category number are removed from the Mysql database. When I open the page of the store, it shows all the items (until then ok), when I click on some category, it filters normally, but when I click on another again, the items disappear, I need to give refresh on the page for the items to appear again

The collection of items:

products: ko.observableArray([]),
    getProducts: function () {
        $.get("/api/webshop", 
        function (data) {
            if (!!data) {
                ctor.products(data);
            }
        });
    }

The filter in category:

Category: function (Category) {
    var products2 = ctor.products().filter(x => x.Category === parseInt(Category));
    ctor.products(products2);
},

THE HTML:

<div class="shop-wrapper">
    <aside class="player-cash"><span data-bind="text: 'Você possui ' + cashPoint() + ' coins'"></span></aside>
        <aside class="category-wrapper" >
        <header>Categorias</header>
            <div class="category" data-bind="click: Category.bind($root, '1')"><span> Itens 1 </span></div>
            <div class="category" data-bind="click: Category.bind($root, '2')"><span> Itens 2 </span></div>
            <div class="category" data-bind="click: Category.bind($root, '3')"><span> Itens 3 </span></div>
    </aside>
</div>
<div class="shop-wrapper">
    <div class="products-wrapper">
        <div class="product-row" data-bind="foreach: products">
            <div class="product">
                <div class="product-name" data-bind="text: Item.name"></div>
                <img data-bind="attr: { src: '../../img/mixmall/' + $data.ItemID     + '.png' }" height=84px width=84px />  
                <div class="product-price-wrapper">
                        <div class="money">$</div>
                        <div class="price" data-bind="text: Price"></div>
                </div>  
                <div class="product-actions">
                    <button data-bind="click: $root.onDetail">Detalhes</button>
                    <button data-bind="click: $root.buy"><span>Comprar</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

It seems that it is filtering on top of what has already been filtered, already researched and I did not find how to fix it... Can you help me?

Thank you in advance!

  • seem to be missing scripts to understand your code. I don’t know how the ctor class is created and what its functions do

  • What information do you need? And how can I pass it on?

  • need to show the ctor class. I believe it’s some api you’re using. it comes from this/webshop? api picked up on github?

  • No, it’s from a website that a colleague made for me, but I’m making some changes and corrections.

  • The JS of the WEB page follows as follows: http://dontpad.com/webshopjs

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.