[TIL]昇順ソート(sort)とフィルタ条件(フィルタ)

Javascriptを使用して各Tagを生成し、レイアウトでobject要素for文を使用してWebページをレンダリングします.
また,sort法とfilter法を用いて条件並べ替えとフィルタリングを実現した.

html

htmlにボタンラベルを書いてくれました.

   <div class="btnContainer my-4">
      <button class="btn btn-danger" id="sortPrice">가격순정렬</button>
    </div>
    <div class="btnContainer2 my-4">
      <button class="btn btn-danger" id="filterBtn">필터</button>
    </div>

js

以下、サーバが商品データを送信し、順番に記入すると仮定する.

     ///서버가 보낸 쇼핑몰 상품데이터라고 가정
      let products = [
        { price: 40000, title: "souffle", img: "0.png" },
        { price: 70000, title: "Caramel Macchiato", img: "1.png" },
        { price: 50000, title: "Fruit ice", img: "2.png" },
        { price: 60000, title: "Donuts", img: "3.png" },
        { price: 40000, title: "Tart", img: "4.png" },
        { price: 30000, title: "pancake", img: "5.png" },
      ];

製品をWebページにレンダリングする

まず、各オブジェクトに複文でラベルを貼り、ラベルにテキストを書きます.
Tagにテキストを入れ、appendChildメソッドを使用して親ラベルに貼り付けます.

      for (let i = 0; i < products.length; i++) {
        products[i].id = i;
        const cardContainer = document.getElementById("cardContainer");
        const card = document.createElement("div");
        card.className = "card";
        const img = document.createElement("img");
        img.className = "이미지";
        img.src = `./img/${products[i].img}`;
        const cardBody = document.createElement("div");
        cardBody.className = "card-body";
        const title = document.createElement("h5");
        title.className = "title";
        title.innerText = products[i].title;
        const price = document.createElement("p");
        price.className = "price";
        price.innerText = products[i].price;
        const btn = document.createElement("button");
        btn.className = "btn btn-danger";
        btn.innerText = "주문하기";

        cardBody.appendChild(title);
        cardBody.appendChild(price);
        cardBody.appendChild(btn);

        card.appendChild(img);
        card.appendChild(cardBody);
        cardContainer.appendChild(card);
      }

ウィットガーが完成したら?

<div class="cardContainer">
  <div class="card">
    <div class="cardBody">
      <h5 class="title"></h5>
      <p class="price"></p>
      <button class="btn btn-danger"></button>
    </div>
  </div>
</div>

🔼 昇順に並べる

sort()は、文字列を比較し、Unicode値の順にソートする方法です.数値で並べ替えたい場合は、2つのパラメータa와bを受け入れて比較します.
回양수,a右b左揃え,回음수,a左b右揃え.
sort法を用いて配列を含む製品配列を並べ替え、priceに近いa.price - b.priceを行った.
これで自動的に昇順に並べ替えられます!(上記の概念を参照)
次に、eq(index)メソッドを使用して、対応する要素を繰り返し文としてインポートします.インポートされた要素title,img,priceはhtml()を順次使用してバインドされる.
🖱 attr()を使用して画像をソートする方法
$(「選択者」)です.attr(「src」、「画像パス」);

      $("#sortPrice").click(function () {
        products.sort(function (a, b) {
          return a.price - b.price;
        });
        for (let i = 0; i < products.length; i++) {
          $(".title").eq(i).html(products[i].title);
          $(".이미지").eq(i).attr("src", `./img/${products[i].img}`);
          $(".price").eq(i).html(products[i].price);
        }
      });

インプリメンテーション

🅿 ろ過条件

forEachを用いてアレイ内の各オブジェクトを順次遍歴し,if条件文によりフィルタを実現した.
priceクラスをインポートし、コンソールで確認することで、HTML CollectION形式であることを確認できます.

これをarrayに変換するためにArray.from()メソッドを使用し、forEachメソッドを使用してarrayに変換したprice taegerをforEachメソッドに変換した.

      $("#filterBtn").click(() => {
        const price = document.getElementsByClassName("price");
        Array.from(price).forEach((item) => {
         
        });
      });

パラメータとして

foreachメソッドに入る項目をコンソールで確認したら?

price(クラス名)がpラベルとして出力されていることがわかります.
ここから、pバーのtextをインポートするには、innerTextを使用する必要があることがわかります.

 if (
            item.innerText < 50000 &&
            item.parentElement.parentElement.className !== "card hidden"
          ) {
            item.parentElement.parentElement.className = "card hidden";
          } else {
            item.parentElement.parentElement.className = "card";
          }

条件

item.innerText50000元未満で、&card hiddenクラス名ではない場合はcard hiddenクラスを追加します.
そうでなければ、レベルをカードに変えます.
🤷‍♀️ フィルタ条件は50000元未満のようですが、&&演算子を使ってカードを隠すか否かを判別し、フィルタリングしました!
フィルターを実施する場合、filterメソッドを使うべきでしょうか?そしてやってみます.filterは新しい配列を作成し、この新しい配列で条件を更新するには、現在出力されている配列と比較し、コードを非常に複雑にする必要があります.🤦‍♀️

インプリメンテーション