Preview
- data.json
{
"items":[
{
"이름":"지원",
"나이":"27"
},
{
"이름":"은서",
"나이":"15"
},
{
"이름":"희원",
"나이":"20"
}
]
}- json.html
<body>
<ul class="list">
<li>
이름: 허지원 <br>
나이: 22
</li>
<li>
이름: 허지원 <br>
나이: 29
</li>
<li>
이름: 허지원 <br>
나이: 18
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
fetch('./data.json')
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
data.forEach(element => {
html+= `<li>
이름: ${element.이름}<br>
나이: ${element.나이} // 데이터값에 맞게 재할당
</li>` ;
});
$('.list').html(html) // html 내부 요소들을 data.json의 데이터 구성요소와 맞게 재구성
})
</script>
</body>
- 출력
❗️ 축약 if 조건문
age = (element.나이 >= 20) ? '성인' : '미성년자'
= element.나이가 20보다 크거나 작으면 (?) 성인, 그렇지 않다면 (:) 미성년자를 표시하라.
👇 적용
<body>
<ul class="list">
<!-- <li>
이름: 허지원 <br>
나이: 22
</li>
<li>
이름: 허지원 <br>
나이: 29
</li>
<li>
이름: 허지원 <br>
나이: 18
</li> -->
</ul>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
fetch('./data.json')
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
data.forEach(element => {
age = (element.나이 >= 20) ? '성인' : '미성년자'; //축약 조건문, element.나이가 20보다 크거나 작으면 (?) 성인, 그렇지 않다면 (:) 미성년자를 표시하라.
html+= `<li>
이름: ${element.이름}<br>
나이: ${age}
</li>` ;
});
$('.list').html(html) // html 내부 요소들을 data.json의 데이터 구성요소와 맞게 재구성
})
</script>❗️ 조건문은 반드시 반복문 내부에 위치할 것.
- 출력
Fetch()를 활용하여 API 받아오기
1. 유투브에서 데이터 받아오기
fetch('경로')
fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&q=먹방&maxResults=3&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs')
👇 fetch() 로 불러온 데이터 값 (일부)
"items": [
{
"kind": "youtube#searchResult",
"etag": "3Z3HAOF4iEgrMChlYDd9Zk7rq2E",
"id": {
"kind": "youtube#video",
"videoId": "3AI8ps52nRo"
},
"snippet": {
"publishedAt": "2023-02-15T03:00:01Z",
"channelId": "UC78PMQprrZTbU0IlMDsYZPw",
"title": "(60분) ※집밥부터 곱창, 갈비, 떡볶이 등※ 모든 음식 풍족한 양으로 대리 만족시켜주는 박종진네 레전드 먹방🔥 | 둥지탈출3",
"description": "티빙에서 스트리밍 : https://tving.onelink.me/xHqC/30a78d6f #tvN #둥지탈출3 #또보겠zip 예능 또 보고 싶어서 만들었.zip ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/3AI8ps52nRo/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/3AI8ps52nRo/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/3AI8ps52nRo/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "tvN",
"liveBroadcastContent": "none",
"publishTime": "2023-02-15T03:00:01Z"
}
},
- json.html
<body>
<ul class="list">
<li>
<a href="" target="_blank">
<img src="" alt="">
<p>제목</p>
</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&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}" target="_blank">
<img src="${element.snippet.thumbnails.high.url}" alt="">
<p>${element.snippet.title}</p>
</a>
</li>` ;
});
$('.list').html(html) // html 내부 요소들을 data.json의 데이터 구성요소와 맞게 재구성
})
</script>
</body>- 출력
2. 검색 기능 추가하기
❗️ 전송 버튼을 눌렀을 때 키워드 값에 해당하는 데이터 불러오기
- json.html
<body>
<input type="text" class="text">
<button class="submit">전송</button>
<!-- <ul class="list">
<li>
<a href="" target="_blank">
<img src="" alt="">
<p>제목</p>
</a>
</li>
</ul> -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$('.submit').click(function(){
keyword = $('.text').val() // .text의 value 값을 keyword에 담아놓음
search(keyword); // 함수 search에 매개변수 keyword를 담아둠.
})
function search(a){
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${a}&maxResults=3&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs`)
// a 값은 keyword값, 즉 asmr 을 대체해야 한다.
.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}" target="_blank">
<img src="${element.snippet.thumbnails.high.url}" alt="">
<p>${element.snippet.title}</p>
</a>
</li>` ;
});
$('.list').html(html) // html 내부 요소들을 data.json의 데이터 구성요소와 맞게 재구성
})
}
</script>
</body>
virtuous circle : 시도 - 구글링 - 문제해결 - 반복