순서
- api 호출하기 (실전)
- 데이터중에 특정 value가 들어있는 object 추출하기
1. api 호출하기 (실전)
한가지 종류의 api를 호출해보면 다른 데이터들도 호출하기쉬워보여서 웹사이트에 캐릭터명을 입력했을때 캐릭터의 api를 가져오는것으로 목표를 정했다.
요약 : 캐릭터명 검색 > 캐릭터에 대한 정보제공
단순하게 기능만 사용할수있게 form을 만들었다.
/api로 post 요청을 하면 nickname이라는 변수로 변수값이 저장된것이 백엔드로 넘어가게된다.
api 문서에서 캐릭터정보에 관한 문서를 살펴보고 이런식을 구현했다.
console.log(response) 를 확인해보니까
캐릭터명만 뜬게아니라 다양한 데이터가 뜬다 근데 내가 원하는건 검색창에 입력한 닉네임만 필요하기때문에 조금 수정이 필요하다.
2. 데이터중에 특정 value가 들어있는 object 추출하기
순서를 정해보면
1. response의 data부분만 출력
2. response의 data부분에있는 object중에 검색한 닉네임과 일치하는것만 출력
해결방법을 생각해보면
반복문을 이용해서 object하나씩 확인하여 맞는 value값이 있을시 그 object를 추출해오면 될거같았다.
반복문을 사용하기위해서는 몇번 반복할지가 중요한데 이것은 length를 이용하면 object의 갯수를 알수 있다.
반복문을 사용해서 하나하나 체크를 할수있지만 중요한것은 value값이 일치한지 검사하는방법이다.
이런식으로 구현했다. 다만 문제는 대소문자규칙을 지키지않으면 검색이안된다는것이다.
해결하기위해서 모두 소문자로 변경시킨후 반복문을 실행시키려했는데 toLowercase() 를 사용했는데 에러가 발생해서 내가모르는 문제가 발생하는것같다. 일단은 검색은되니까 대소문자까지는 잠깐 보류하자.
생각보다 이용자가 적은 검색어에 일치하는 데이터가없을때 데이터가 없다는 로그를 전송하는게 오히려 어려웠다. 그래서 생각해낸것이 response.data.length가 i와 값이 일치할때까지 위에 if문으로 해결하지못했다면 데이터가 없다는 로그를 전송할수있게 작성했다.
마무리
앞으로 다른 api를 호출하더라도 데이터안에 내가 필요한것만 가져올수있다면 다른 api도 손쉽게 사용할수 있을꺼라고 생각해서 함수로 잘 구현하면 빠르게 새로운기능들을 추가할수있다라는 생각이 든다.
ex) 경매장검색, 캐릭터스탯검색
