개인 숙제

어제 생각하고 잔 그 코드를 실행해봤는데 다행히 잘 나옵니다.

아래 코드가 부분검색과 대소문자 관계없이 검색이 가능합니다.

//검색한 영화제목 카드 찾기
function findCard(movietitle) {
    fetchJson(url).then((data) => {
        let rows = data.results;
        let resultMovie;
        let str1;
        let str2 = movietitle.toUpperCase();
        let count;
        rows.forEach((a) => {
            let t = a['title'];
            str1 = t.toUpperCase();
            count = str1.search(str2);
            console.log("count check : ",count);
            if(0 <= count){
                console.log(resultMovie);
                let id = a['id'];
                let title = a['title'];
                let image = `https://www.themoviedb.org/t/p/w500/${a['poster_path']}`;
                let overView = a['overview'];
                let rating = a['vote_average'];
                
                newCard(id, title, image, overView, rating, $mycards).then((div) => {
                    
                });
            }
        })
    })
}

 

grid를 시도중 튜터님이 검색할땐 모든 영화에서 검색을 가능하게 하라고 하셔서 시도중입니다.

 

국취제 면담을 갔다온 뒤 다시한번더 숙제를 확인하는데 전 엔터키를 html에서 onkeyup을 사용했는데 아닌거 같아 수정 했습니다.

//수정 전 엔터키 입력
function fnEnterkey(){
    if(window.event.keyCode == 13){
        checkCard($movieTitle.value);
    }
}

//수정 후 엔터키 입력
//엔터키 입력시 검색
document.addEventListener("keyup", function(event) {
    if (event.key === 'Enter') {
        checkCard($movieTitle.value);
    }
});

 

정영훈튜터님이 내주신 모든 영화에서 찾는것을 구현을 했는데 맞는지는 모르겠습니다.

원래 가져오는 url에서 page가 1인것을 확인하고 인터넷에서 찾아보니 다들 500페이지까지만 구하길래 501값을 넣어보니 없었습니다. 그래서 for문으로 500까지 돌리면서 url 의 page값에 다 대입을 해서 출력하게 했습니다.

//url 제일 뒤 page에 숫자를 안넣고 아래 fetchJson2함수에서 넣어줍니다.
let url2 = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=';

//전체에서 영화 찾는 url 패치
let fetchJson2 = async function (url , num) {
    try {
        let response = await fetch(url+`${num}`, options);
        let data = await response.json();
        return data;
    } catch (err) {
        console.error(err);
    }
}

//검색한 영화제목 카드 찾기
function findCard(movietitle) {
	//페이지가 500까지만 있어서 500까지 돌렸습니다.
    for(let i = 1; i <= 500; i++){
        fetchJson2(url2 , i).then((data) => {
            let rows = data.results;
            let resultMovie;
            let str1;
            let str2 = movietitle.toUpperCase();
            let count;
            rows.forEach((a) => {
                let t = a['original_title'];
                str1 = t.toUpperCase();
                count = str1.search(str2);
                if(0 <= count){
                    console.log(resultMovie);
                    let id = a['id'];
                    let title = a['title'];
                    let image = `https://www.themoviedb.org/t/p/w500/${a['poster_path']}`;
                    let overView = a['overview'];
                    let rating = a['vote_average'];
                    
                    newCard(id, title, image, overView, rating, $mycards);
                }
            })
        })
    }
}

테스트로 joker를 넣어보니 잘 나오는것을 확인했습니다.

 

 

검색을 계속 이것저것 해보니 제목과 검색과 다른 값이 있어 코드를 살펴 본 결과 original_title 값을 가져왔어야했는데 그냥 title 값을 가져와서 맞지 않았습니다. 그래서 title값을 original_title로 변경해줬습니다. 그리고 filter를 사용했습니다.

//검색한 영화제목 카드 찾기
function findCard(movietitle) {
    //이게 맞는지는 모르겠으나 일단 구현했습니다.
    //영화 페이지가 최대 500페이지라서 500까지 돌렸습니다.
    //for문을 돌려서 각 페이지마다 검색
    for(let pageNumber = 1; pageNumber <= 500; pageNumber++){
        fetchJson(url , pageNumber).then((data) => {
            let rows = data.results;
            let inputTitle = movietitle.toUpperCase();
            //filter로 변경
            let rowsTitle = rows.filter((value) => {
                let a = value['original_title'].toUpperCase();
                let count = a.search(inputTitle);
                if(-1 < count){
                    return value;
                }
            })
            rowsTitle.forEach((a) => {
                let id = a['id'];
                let title = a['original_title'];
                let image = `https://www.themoviedb.org/t/p/w500/${a['poster_path']}`;
                let overView = a['overview'];
                let rating = a['vote_average'];
                
                newCard(id, title, image, overView, rating, $mycards);
                    
            })
            
        })
    }
}

//모든 카드 출력
function allCard(){
    fetchJson(url,1).then((data) => {
        let rows = data.results;

        rows.forEach((a) => {
            let id = a['id'];
            //이부분도 title을 original_title로 변경
            let title = a['original_title'];
            let image = `https://www.themoviedb.org/t/p/w500/${a['poster_path']}`;
            let overView = a['overview'];
            let rating = a['vote_average'];

            newCard(id, title, image, overView, rating, $mycards);
        })
    });
}

변경하고 확인하니 잘 나왔습니다.

 

혹시 몰라 튜터님께 질문을 했는데 for문 말고 filter를 사용해야 한다고 하셔서 시도중입니다.

그 전체 페이지를 돌리는건 아직 for문으로 500개 다 돌리고, 그 안에서 filter로 찾아서 찾은 값을 forEach문을 돌려줬습니다.

 

저 500개 다 돌리는 것을 filter로 하라고 하신거 같은데 감이 오지 않습니다.

아니었습니다. 저렇게 for문 돌리는건 문제 없다고 하셨습니다.

 

아직 grid는 이해가 되지않아 진행중입니다.

 

면담을 다녀오느라 시간이 아직 차지않아서 grid는 잘 모르겠어서 일단 놨두고 프로그래머스 문제들을 풀고있습니다.

내일은 시간이 나면 공지에 올려주신 import와 export에 대해 공부하려 합니다.

 

참고자료
https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

https://www.techiedelight.com/ko/detect-enter-key-press-javascript/

사용자가 JavaScript/jQuery로 Enter 키를 눌렀는지 감지