목록 필터링

저번에 홈에 들어가면 태그별 필터링 하는게 있었다. 이미 만들어 져있지만 그게 어떻게 동작하는지 알아보자.
일단 html 코드를 먼저 살펴 보자.

<label for="categorySelect" class="col-4 col-form-label">카테고리</label>
<select class="form-control col-8" id="categorySelect">
    <option value="" selected>전체</option>
    <option value="drink">음료</option>
    <option value="food">음식</option>
</select>

index.ejs 코드를 살펴보면 이런 부분이 있다.
이 부분은 카테고리를 선택하는 html코드이다.
선택하는 것에 따라 value값이 다르게 나타난다.

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

이 코드는 index.ejs 안에 script에 들어있는 코드다.
일단 처음 실행될때 get_goods()를 실행 시킨다.
이 함수는 나중에 나온다.
그리고 categorySelect가 바뀌면 get_goods가 실행 되는데, 아까 위에 html 카테고리에서 밸류값을 인자로 가져가게 된다.

function get_goods(category) {
    $("#goodsList").empty()
    console.log(category)
    $.ajax({
        type: "GET",
        url: `/api/products${category ? "?tag=" + category : ""}`,
        data: {},
        success: function (response) {
            let products = response["products"]
            for (let i = 0; i < products.length; i++) {
                make_card(products[i])
            }
        }
    })
}

이 부분은 index.ejs안에 script에 들어있는 코드이다.
아까 위에 말한 get_goods 함수이다.
카테고리를 인자로 받는다.
일단 goodsList 비어있게 만든다. 그리고 GET을 이용해 /api/products를 호출하는데 뒤에는 ?tag=선택한카테고리 이런식으로 url을 만드는 것이다.
거기로 들어가서 데이터를 받아오고 for문을 이용해서 데이터가 있는 만큼 카드를 만든다.