フィルタリスト

9014 ワード
テキストリンク
前回ホームページに入るとラベルでフィルタリングされていましたすでにできていますが、どのように働いているのか見てみましょう.
まず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カテゴリでvalue値をパラメータとします.
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文を使用して、データに基づいてカードを作成します.
CSVデータの読み込みとデータの探索
インデントJSONstringifyの出力