공부/Vue.js

[Vue.js] 영화 검색 사이트 예제 - 11. 영화 목록에서 ID 중복 제거

도리암 2022. 3. 28. 22:27

검색 결과의 영화들 중에는 중복되는 내용들이 존재한다.

확인을 위해 MovieItem.vue의 출력값을 Title이 아닌 imdbID로 바꿔본다.

첫번째와 두번째 검색 결과가 동일한 결과인 것을 확인할 수 있다.

보통 이러한 경우, API 자체에서 내부적으로 수정을 해야하나 우리는 해당 API에 대한 권한이 없다.

따라서 검색한 결과를 가공하여 이러한 오류를 제거해보자.

 

Lodash - uniqBy

참조) Lodash Documentation

 

Lodash Documentation

_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti

lodash.com

Lodash 문서의 uniqBy함수는 배열의 중복데이터를 제거해준다.

이 기능을 사용하기 위해 lodash 패키지를 설치해준다.

npm i lodash

uniqBy만 사용할 것이므로 import할 때도 아래와 같이 import 한다.

import _uniqBy from 'lodash/uniqBy'

적용

Search는 영화 검색 결과의 배열이므로 _uniqBy() 함수로 감싸준다.

완성

중복이 없어진 모습이다.