[TIL] 오름차순정렬(sort)와 조건필터하기(filter)

자바스크립트를 활용하여 각 Tag를 생성하고 배열에 object요소들을 for문을 통하여 웹페이지에 렌더링했다.
또 sort메서드와 filter메서드로 조건에 따라 정렬과 필터를 구현하였다.

• html

html에는 button테그를 작성해주었다.

   <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" },
      ];

products를 웹페이지에 렌더링하기

일단 반복문을 사용하여 각 object에 Tag를 붙여주고 Tag에 텍스트를 작성해준다

Tag에 text를 넣어주고 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()는 문자열을 비교하여 유니코드 값 순서대로 정렬되는 메서드이다. 숫자로 정렬하고싶다면 두 개의 매개변수 a와b를 받고 비교한다.
양수를 리턴하면 a는 오른쪽 b는 왼쪽으로 정렬, 음수를 리턴하면 a는 왼쪽 b는 오른쪽으로 정렬한다.

배열이 담겨있는 products 배열을 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를 활용하여 배열의 각 object를 순서대로 돌며 if조건문을 통하여 필터를 구현했다.

price 클래스를 가져와 콘솔로 확인해보면 HTML COLLECTION 형태인것을 확인할 수 있다.

이것을 array으로 바꾸기 위해 Array.from() 메서드를 사용하였고 array로 바뀐 price테그들을 forEach메서드를 사용했다.

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

• forEach메서드에 인자로 들어오는 item을 콘솔로 확인하면?

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.innerText 50000원 미만이고 && card hidden 클래스 네임이 아니라면 card hidden 클래스를 추가한다.
아니라면 클래스를 card로 바꾼다.

🤷‍♀️ 50000원미만 조건으로 필터하는것 같지만 &&연산자를 사용하여 card hidden이 있는지 없는지 판별하여 필터하였다!

필터를 구현할 때 당연히 filter메서드를 활용하면 되지 않을까? 하고 시도했다. filter는 새로운 배열을 만드는데 이 새로운 배열로 조건에 맞게 갱신하려면 현재 출력되는 배열과 비교하여 남기거나 사라지게 해야하기 때문에 코드가 굉장히 복잡해졌다! 🤦‍♀️

✨구현