<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>fetch</title>
<style>
ul {
border-bottom: 3px solid #000;
list-style: none;
padding-left: 0;
line-height: 1.6;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.querySelector("#result")
// json 파일 읽기
fetch('https://dummyjson.com/users')
// json 파일을 객체로 변환
.then(res => res.json())
// 출력
// .then(json => console.log(json.users[0]))
.then(json => {
let output = '';
json.users.forEach((user, idx) => {
console.log(user)
if (user.age < 30) {
output += `
<h2>${user.firstName}</h2>
<ul>
<li><img src=${user.image} alt=${user.lastName}></li>
<li>이메일 : ${user.email}</li>
<li>나이 : ${user.age}</li>
<li>성별 : ${user.gender}</li>
</ul>
`
}
})
result.innerHTML = output;
})
.catch(err => console.log(err));
</script>
</body>
</html>