TIL
1. fetch함수는 비동기함수여서 데이터를 가져와도 전역변수에 할당 불가능하다고 생각함
> 아님 (가능함)
2. fetch함수에서 데이터를 html로 append하는 것이여서, 다시 호출해야한다고 생각함
> 아님 (그럴필요없음)
3. flow
* fetch함수에서 데이터 부분을 전역변수에 저장
* html에 append하는 구간을 함수 생성 + 정렬종류는 함수 인자값으로 받기
* 정렬종류가 선택되면 전역변수를 해당값에 맞게 정렬 후 html에 append하는 함수(정렬된 데이터값) 실행
let data = {};
.then((response) => response.json())
.then((response) => {
data = response.results;
drawCard(data);
})
.catch((err) => console.error(err));
1. fetch로 받은 데이터 = response.results: 전역변수 data에 저장
2.drawCard함수에 배열을 인자값 설정
function drawCard(sortType) {
//빈화면 만들기
document.querySelector('#movies').innerHTML = '';
sortType.forEach((movie) => {
const template = `
<div class = "movie" id = "${movie.id}" >
${movie.poster_path}" alt=""/>
<div class = "text">
<h3 class = "title">${movie.title}</h3>
</div>
<button class="detailpage_btn">영화 상세보기</button>
</div>
<div class="modal" id = "${movie.id}" style="display: none;">
<div class="desc">${movie.overview}</div>
<button class="close">X</button>
</div>`;
document.querySelector('#movies').insertAdjacentHTML('beforeend', template);
displayShow();
displayHide();
});
}
3. document.querySelector("#movies").innerHTMl =""; 빈 화면으로 만들어주기
4. drawCard함수에 인자값 sortType에 따라" 평점순 / 제목순 / 개봉일순" 변경 + 데이터를 insertAdjacentHTML로 붙이기
<select id="orderType">
<option title="현재 선택됨" value="1">선택</option>
<option value="2">평점순</option>
<option value="3">제목순</option>
<option value="4">개봉일순</option>
</select>
5. html파일에서 select태그 설정
document.getElementById('orderType').addEventListener('change', function (event) {
const orderType = document.getElementById('orderType');
const selectType = orderType.options[orderType.selectedIndex].value;
console.log(selectType);
if (selectType === '1') {
//선택 (원래대로)
drawCard(data);
} else if (selectType === '2') {
//평점순
voteAverage();
} else if (selectType === '3') {
//제목순
orderABC();
} else if (selectType === '4') {
//개봉일순
releaseDate();
}
});
6. js 파일에서 select태그가 변경될때 addEventListener사용
7. script 에서 select 태그에서 선택된 option 값 가져오기
: document.getElementById('orderType').options[orderType.selectedIndex].value;
//[정렬1] 평점순
function voteAverage() {
let sortVoteRate = data
.map((v) => v)
.sort(function (a, b) {
return b.vote_average - a.vote_average;
});
drawCard(sortVoteRate);
}
//[정렬2] 제목순 (가나다순)
function orderABC() {
let sortAZ = data
.map((v) => v)
.sort(function (a, b) {
return a.title.toLowerCase() < b.title.toLowerCase() ? -1 : 1;
});
drawCard(sortAZ);
}
//[정렬3]개봉일순
function releaseDate() {
console.log(data);
let sortVoteRate = data
.map((v) => v)
.sort(function (a, b) {
return b.release_date.replaceAll('-', '') - a.release_date.replaceAll('-', '');
});
drawCard(sortVoteRate);
}
8. 전역으로 저장된 data를 map 메소드를 사용해서 복사 + sort메소드로 정렬
9. drawCard(선택된배열) 실행 => 화면에서 append
