[영화검색 사이트] 영화 리스트 구현하기

ui 기본틀이 만들어 졌으니 이제 TMDB에서 받아온 데이터를 가지고 리스트 를 만들겠다

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    .then(response => response.json())
    .then(response =>
        response.results.forEach(item => {
            let id = item.id;
            let title = item.title
            let poster_path = item.poster_path
            let overview = item.overview;
            let vote_average = item.vote_average;

            let appendHtml =
                `<li class="cell" onclick="printId(\'' + ${id} + '\')">
                    <div class="imgBox">
                    <img src="https://image.tmdb.org/t/p/w500${poster_path}" alt="">
                    </div>
                    <div class="movicInforBox">
                        <span class="movieTitle">${title}</span>
                        <span class="movieoverview">${overview}</span>
                        <span class="movievote_average">평점 : ${vote_average}</span>
                    </div>
                </li>`;
            result += appendHtml
            movieList.innerHTML = result

            searchData.push(item)

        })
    )
    .catch(err => console.error(err));

설명

1. TMDB에서 API 키를 받아와 fatch함수로 데이터를 요청한다.

then안에 우리가 요청한 데이터들이 response라는 매개 변수에 담겨 있다

2. response는 배열이기 때문에 forEach를 통해서 하나하나 출력 해준다

3. 미리 만들어 놓았던 li의 탬플릿을 가져와서 appendHtml이라는 변수에 ``{백틱} 으로 li탬플릿을 감싼다.

4. li탬플릿에 response객체를 필요한 위치에 집어넣는다.

5. result라는 변수를 빈 문자열로 전역변수에 선언한 후  appendHtml를 result 에 추가 한다. 

innerHtml으로 ul안에 li를 집어넣어 준다.