실습 풀이 코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONPlaceholder 실습</title>
</head>
<body>
<h1>JSONPlaceholder API 실습</h1>
<button class="showBtn">버튼</button>
<div id="comments"></div>
<script src="/24.08.08/index.js"></script>
</body>
</html>javascript
const apiUrl = '보안';
const button = document.querySelector(".showBtn");
button.addEventListener("click", fetchComments);
async function fetchComments() {
try {
// API 호출
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error( "오류" + response.statusText);
}
const comments = await response.json();
console.log(comments);
// slice 메서드를 활용하여 0번째부터 9번째 값까지 복사한 새로운 배열 만들기
let slicedData = comments.slice(0, 10);
const commentsDiv = document.getElementById("comments");
slicedData.forEach((comment) => {
// comment의 body의 길이가 40 이상일 때 0번째부터 39번째 문자를 복사하고 맨 뒤에 "..."을 붙인 문자열을 할당
let slicedBody = comment.body.length >= 40 ? comment.body.slice(0, 40) + "..." : comment.body;
// 각 comment를 DOM에 추가
const commentElement = document.createElement("div");
commentElement.innerHTML = `
<h2>${slicedBody}</h2>
<p>사용자 이름: ${comment.name}</p>
<p>이메일: ${comment.email}</p>
`;
commentsDiv.appendChild(commentElement);
});
} catch (error) {
console.error("오류:", error);
}
}풀이 설명
비동기 함수를 사용해 api 정보를 호출한다. 불러올 정보중 0번부터 10번쩨 값까지 슬라이드 메서드를 활용해서 새로운 배열을 만든다 코맨트를 html에 문서화 시키고 foreach 문을 통해 요소를 순회하게 한다.
