[작품] - 지역 선택 Select Box만들기(2)

1. 개요

저번에 만든 지역선택 Box는 모형만 만든 것이라면 이번에는 실제 지역을 선택하면 선택한 지역만 나오게 만들 것이다. 예를 들어 서울을 선택하면 서울지역 식당만 나오게 하고 서울,수원등 여러군데를 선택하게 되면 

선택된 모든 식당들이 나오게 할 예정이다.

위 사진은 강남구, 수원시를 선택한 모습이다. 이렇게 한개 이상의 지역을 선택했을 경우는 처음 선택한 곳+ 외 ~~ 곳 이렇게 만들었다. 지역을 선택하고 조회버튼을 누르면 해당 지역이 나온다. 

+ 초기화 버튼을 누르면 선택된 모든 체크가 해제되고 그 상태에서 조회를 누르면 초기에 나온 모든 식당들이 나온다.

강남구,수원의 가게가 선택된 모습

2. 구현하기

2-1 체크된 box들은 배열에 넣기

const checkbox = document.getElementsByName("region");
const checkedRegion = document.querySelector(".doo .example");

function check() {
  let array = []; // 선택된 지역들
  for (let i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked === true) {
      array.push(checkbox[i].parentElement.innerText.trim());
    }
  }
}

document.querySelector(".findRegion").addEventListener("click", check);

빈 배열을 만들어서 조회버튼을 눌렀을 때 반복문을 사용해서 체크된 모든 지역들의 이름을 넣어준다.

 

2-2 fetch로 가상의 데이터를 가져오기

fetch("http://localhost:4000/mainpage")
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
}

콘솔을 찍어서 데이터가 잘 나오는 것을 확인한다. 데이터가 잘 나오니 fetch를 성공했을 때 지역이 한곳 선택됬을 때, 여러곳 선택됬을 때 그리고 아무 선택이 안됐을 때를 나눠서 조건을 달아준다.

 

2-3 여러 식당이 선택된 경우

if (array.length > 1) {
        // 지역 선택을 한 곳 이상했을 경우
        checkedRegion.innerHTML = `${array[0]} 외 ${array.length - 1}곳`;
        checkedRegion.style.color = "black";
        Store_Zone.innerHTML = "";
        data.forEach((item) => {
          if (array.includes(item.addressName.split(" ")[1])) {
            //DOM 요소들을 만들어준다.
          }
        });

코드가 길긴하지만 이 외의 다른 두 경우도 같은 원리이기 때문에 이거 하나만 설명하겠다. 

사용자에게 어떤 곳을 선택했는지 보여주기 위해 input란에 선택한 곳을 나타내준다.

현재 array에 저장된 요소들을 콘솔로 찍은 모습이다.

 

data에 있는 addressName은 현재 이런식으로 저장되 있기 때문에 split으로 띄어쓰기 기준으로 나눈후 1번째 요소를 반환하면 "강남구"가 나온다. 

만약 배열안에 이 요소가 있으면 해당 가게를 만든다.

가게 리스트들을 리렌더링 하기 위해 innerHTML을 빈 문자열로 만들고 다시 DOM요소들을 생성해준다.

 

2-4 초기화 버튼

//초기화 버튼 기능
const resetbutton = document.querySelector(".resetbutton");
function reset() {
  checkbox.forEach((item) => {
    item.checked = false;
  });
}
resetbutton.addEventListener("click", reset);

초기화 버튼은 체크된 모든 box들을 모두 해제하면 간단하게 해결된다.