json파일, fetch함수 기초 사용법에 이어 이번엔 fetch() 함수로 원격 API 호출
을 해보려 한다.
제공된 API에서 필요한 부분/경로 확인
<ul class="list1">
<!-- api로 불러올 부분(마크업xxx) -->
</ul>
fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&q=새해&maxResults=5&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs')
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
data.forEach(element => {
html+=`
<li>
<a href="https://www.youtube.com/watch?v=${element.id.videoId}">
<img src="${element.snippet.thumbnails.high.url}" alt="">
<p>${element.snippet.title}</p>
</a>
</li>`;
});
$('.list1').html(html);
// console.log(data);
});
fetch()문 요청 URL 분석
fetch('https:~
search?
~q=새해&
~maxResults=5
~')
search 뒤에 물음표(?)
: 쿼리스트링의 시작을 표시하기로 약속한 문자q
: 해당 키워드로 검색maxResults
: 필요한 갯수만큼 검색type
: 'video'는 영상을, 'channel'은 채널을, 'playlist'는 재생목록을 검색
<li> <a href="https://www.youtube.com/watch?v=${element.id.videoId}"> <img src="${element.snippet.thumbnails.high.url}" alt=""> <p>${element.snippet.title}</p> </a> </li>`;
${element.id.videoId}
${element.snippet.thumbnails.high.url}
${element.snippet.title}
📍 각 필요한 부분들을 제공된 API에서 찾아 경로 설정
'새해'를 검색했을때 나오는 5개의 유튜브 영상
<input type="text" class="text">
<button class="submit">검색</button>
<ul class="list1">
</ul>
$('.submit').click(function(){
keyword = $('.text').val();//submit을 클릭하면 .text의 value값을 가져옴
search(keyword,2)//아래 작성한 매개변수 자리에 들어갈 내용
});
function search(k,c){
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${k}&maxResults=${c}&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs`)
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
data.forEach(element => {
html+=`
<li>
<a href="https://www.youtube.com/watch?v=${element.id.videoId}">
<img src="${element.snippet.thumbnails.high.url}" alt="">
<p>${element.snippet.title}</p>
</a>
</li>`;
});
$('.list1').html(html);
});
};
search();
function search(k,c){ fetch문~}
: 매개변수를 이용해 필요한 부분을 가져오기 위해 함수로 만들어 줌$('.submit').click(function(){ keyword = $('.text').val() });
: submit을 클릭하면 .text의 value값을 가져옴(검색창에 검색할 값)search(keyword,2)
: 함수에 작성한 매개변수 자리에 들어갈 내용