- data를 만들어서 직접 적용하는 방법
- data가 있는 주소를 가져와서 적용하는 방법
🧩 파일 구조
- data.json
- index.html
- main.js
🧩 data를 직접 만들어 적용
data.json
{
"items":[
{
"이름":"김두환",
"나이":30,
"애완견유무":true
},
{
"이름":"강두두",
"나이":10,
"애완견유무":false
},
{
"이름":"나나나",
"나이":50,
"애완견유무":true
}
]
}
// json은 숫자, 불린 값 빼고 다 ""들어감
// 이어서 쓸 때 빼고는 마지막에 , 없어야함html
<body>
<ul>
</ul>
</body>main.js
$(function(){
fetch('./data.json')
.then((response) => response.json())
.then((json) => { // 데이터를 가져오는 작업
data = json.items; // 해당 아이템을 가져오기 위해 data변수에 저장
let html =''; // 재할당을 하겠다!
data.forEach(el => {
// data 각각 반복문을 돌리는 것 foreach쓰면 자동완성문 나옴
// element를 el이라고 줄여서 써준 것 임
// 해당 데이터 값을 부르려면 el.oo 이렇게 불러오면 됨
if (el.나이 >= 20) {
isAdult = '성인';
} else {
isAdult = '미성년';
}
isAdult = (el.나이 >= 20) ? el.나이+'성인' : el.나이+'미성년';
isPet = (el.애완견유무) ? '있다' : '없다';
html += `<li> // += 증가하면서 대입이 된다
이름:${el.이름}<br>
나이:${isAdult}<br>
애완견유무:${isPet}<br>
<hr>
</li>`; // 백틱 안에 ${} 문자와 변수를 연결 할 때 이런식으로 쓰임
});
$('ul').html(html);
// html로 ul에 변수 html을 넣어주는 것
})
});결과 화면
🧩 data 주소를 가져와 적용하는 방법
html
<body>
<ul>
</ul>
</body>main.js
$(function(){
fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&q=%EB%A8%B9%EB%B0%A9&maxResults=20&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs')
// 데이터가 있는 해당 주소를 가져와서 연결 시켜준다
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
data.forEach(el => {
html += `<li>
<img src="${el.snippet.thumbnails.high.url}" alt="">
//items 밑에서 부터 이미지가 있는 url까지 경로를 쭉 써준다
<p>${el.snippet.title}</p>
</li>`;
});
$('ul').html(html);
})
});결과화면
해당 이미지 썸네일과 타이틀 글이 나오는 걸 확인 할 수 있다
코드공부