When i click select box, client shows the specific items.

e.g) food → food goods, drink → drink goods.

views/index.ejs

$(document).ready(function () {
    get_goods()
    $("#categorySelect").on("change", function () {
        get_goods($(this).val())
    })
})

: When window opens, call function get_goods without any argument. And Whenever client changes selectbox value, it calls function get_goods again with changed value.

→

function get_goods(category) {
    $("#goodsList").empty()

    $.ajax({
        type: "GET",
        url: `/api/goods${category ? "?category=" + category : ""}`,
        data: {},
        success: function (response) {
            let goods = response['goods'];
            console.log(goods);

            for (let i = 0; i < goods.length; i++) {
                make_card(goods[i])
            }
        }
    });
}

: When function get_goods is called, make list empty. and call goods api to show. if there is argument(category), it's gonna be "/api/goods?category=food" or "/api/goods?category=drink", and if there is no argument, it's gonna be just "/api/goods".

/api/goods

/api/goods?category=food

api/goods?category=drink