[영화 검색 사이트] 정렬 기능 구현하기

javascript의 sort()라는 메서드를 활용하여 정렬기능을 만들었다.

 

let arr = [1,2,3,4,5]

arr.sort()

 

문자열 정렬은 sort안에 함수를 넣고 함수안에 2개의 매개변수 a,b를 집어넣은 다음에 매개변수의 크기를 비교하여 a 가 b 보다 작으면 -1, a 가 b보다 크면 1을 리턴한다.

let arrUser = ["짱구", 철수", "유리", "맹구", "훈이"]

// 영화데이터 정렬
resultSort = searchData.sort((a, b) => {
    if (a < b) {
        return -1
    } else if (a > b) {
        return 1
    } else {
        return 0
    }
})

 

 

프로젝트 코드

let sortEvent = (value) => {
    let listClass = '';

    let resultSort = '';
    // 정렬 : 가나다 순
    if (value === 1) {
        // 영화데이터 정렬
        resultSort = searchData.sort((a, b) => {
            if (a.title < b.title) {
                return -1
            } else if (a.title > b.title) {
                return 1
            } else {
                return 0
            }
        })
    }
    // 정렬 : 높은 평점순
    if (value === 2) {
        // 영화데이터 정렬
        resultSort = searchData.sort((a, b) => {
            if (a.vote_average > b.vote_average) {
                return -1
            } else if (a.vote_average < b.vote_average) {
                return 1
            } else {
                return 0
            }
        })
    }
    // 정렬 : 낮은 평점 순
    if (value === 3) {
        // 영화데이터 정렬
        resultSort = searchData.sort((a, b) => {
            if (a.vote_average < b.vote_average) {
                return -1
            } else if (a.vote_average > b.vote_average) {
                return 1
            } else {
                return 0
            }
        })
    }
    // 정렬 : 최신 순
    if (value === 4) {
        // 영화데이터 정렬
        resultSort = searchData.sort((a, b) => {
            if (a.release_date > b.release_date) {
                return -1
            } else if (a.release_date < b.release_date) {
                return 1
            } else {
                return 0
            }
        })
    }
    // 정렬 : 오래된 순
    if (value === 5) {
        // 영화데이터 정렬
        resultSort = searchData.sort((a, b) => {
            if (a.release_date < b.release_date) {
                return -1
            } else if (a.release_date > b.release_date) {
                return 1
            } else {
                return 0
            }
        })
    }
    // 정렬한 데이터를 html에 리스트로 뿌려주기
    let sortResult = '';
    for (let i = 0; i < resultSort.length; i++) {
        let titleAppend =
            `<li class="cell" onclick="printId(\'' + ${resultSort[i].id} + '\')">
                    <div class="imgBox">
                    <img src="https://image.tmdb.org/t/p/w500${resultSort[i].poster_path}" alt="">
                    </div>
                    <div class="movicInforBox">
                        <span class="movieTitle">${resultSort[i].title}</span>
                        <span class="movieoverview">${resultSort[i].overview}</span>
                        <span class="movievote_average">평점 : ${resultSort[i].vote_average}</span>
                    </div>
                </li>`;

        sortResult += titleAppend;
        movieList.innerHTML = sortResult;
    }
}

1.먼저 코드가 실행되면 매개변수로 value값을 받는다 

2.매개변수는 정렬버튼을 onclick을 했을때 들어오고 각각다른 매개변수가 매개변수가 들어온다

3.매개변수가 1일때는 가나다 순, 2일때는 높은 평점순, 3은 낮은 평점순, 4는 최신순, 5는 오래된 순이다.

4. if문으로 각 정렬에 맞는 번호와 value값이 같으면 해당 정렬을 실행한다.

5.정렬된 값을 기반으로 for문을 돌려서 새로운 영화 리스트를 만들고 리스트를 ul 테그 안에 innerHtml 로 집어넣는다.