json을 사용하여 youtube 컨텐츠 불러오기
1. html 마크업
마크업은 input으로 검색창 만들어주고, 간단하게 짬.
<body>
<input type="text" class="search">
<button id="btn">검색</button>
<ul class="list1">
<li>
<a href="https://www.youtube.com/watch?">
<img src="${element.snippet.thumbnails.high.url}" alt="">
<p>${element.snippet.title}</p>
</a>
</li>`;
</ul>
</body>2. 스크립트
forEach문을 통해 html에 작성해 두었던 태그를 백틱을 이용하여 안에 넣고, 데이터를 연결시켰다.
$(function(){
$('#btn').click(function(){
q = $('.search').val()
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${q}&maxResults=3&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);
})
})
})
온전히 나를 위한 코딩 기록 공간