[TIL] 공공 api 가져올 때 리스트 개수 조절(JavaScript, slice())

영화 정보 페이지를 만들기 위해 TMDB 사이트에서 API를 가져왔는데 20개의 영화 리스트가 보여졌다.
내가 원하는건 인기 상위 10개만 보이도록 하고 싶어서 docs를 찾아보려 했지만 사이트 응답이 너무 느려서 볼 수가 없었다.

그래서 구글링을 하다가 어떤 분이 slice 문법을 활용해 구현해놓은 것을 보고 따라해봤다.

// 영화 api 조회
const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: '~~~'
  },
}

// 조회한 영화 데이터들 배열 
const getPage = fetch(
  'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&page=ko-KR&sort_by=popularity.desc',
  options
)
  .then((response) => response.json())
  .then((response) =>
    response.results.slice(0, 10).forEach((data, idx) => { 
    
    // ~~ 데이터 불러오는 양식 ~~ 
    }

위의 코드를 보면 결과값 뒤에 slice()를 붙여 가져올 데이터 배열의 길이를 조절하였다.
slice(start,end) 의 경우 시작인덱스 부터 지정한 끝 인덱스의 전까지 반환을 하기 때문에
top 10을 불러오려면 0~9 까지 가져와야 한다.
그러면 slice(0,10) 이라고 표기하면 딱 상위 10개의 데이터가 출력되는 것을 볼 수가 있다.