카테고리 없음
[JS/JSON] BookList
7ingout
2022. 6. 15. 17:23
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script defer src="js/main.js"></script>
</head>
<body>
<div id="wrap">
<header>
<h1>booklist</h1>
</header>
<div class="buttonDiv">
<button class="btn" data-key="year" data-value="2022년">
2022년도
</button>
<button class="btn" data-key="year" data-value="2021년">
2021년도
</button>
<button class="btn" data-key="year" data-value="2020년">
2020년도
</button>
<button class="btn" data-key="year" data-value="2019년">
2019년도
</button>
</div>
<table cellspacing="0" cellpadding="10" class="books another">
</table>
<table cellspacing="0" cellpadding="10" class="books">
<tr class="book">
<th>글쓴이</th>
<th>제목</th>
<th>년도</th>
</tr>
</table>
</div>
</body>
</html>
main.js
function loadbooks() {
// fetch api
// fetch('url') -> 네트워크 주소를 적으면 받아옴
return fetch('data/data.json')
// 성공하면 받아온 데이터를 제이슨 변환
.then(response => response.json())
.then(data => data.books);
}
function displaybooks(books){
// html 문서의 ul을 선택
const container = document.querySelector('.books');
container.innerHTML = books.map(item => createHTMLString(item)).join('');
}
function createHTMLString(item){
return `
<tr class="book">
<td>${item.writer}</td>
<td>${item.title}</td>
<td>${item.year}</td>
</tr>
`;
}
// 이벤트 설정하기
function setEventListeners(books) {
const buttons = document.querySelector('.buttonDiv');
const h1 = document.querySelector('h1');
h1.addEventListener('click', ()=> displaybooks(books));
buttons.addEventListener('click', event=> onButtonClick(event, books))
}
// //버튼을 클릭할때 실행되는 함수
function onButtonClick(event, books){
// console.log(event)
const dataset = event.target.dataset;
const key = dataset.key;
const value = dataset.value;
// key값과 value값중 하나라도 없으면 리턴(종료)
if(key == null || value == null) {
return;
}
const filterd = books.filter(item => item[key] === value);
console.log(filterd);
displaybooks(filterd);
}
// main프로미스 소비자!! json데이터 받아와 !
loadbooks()
.then(books => {
console.log(books);
displaybooks(books);
setEventListeners(books);
})
.catch(error=> {
console.log(error);
})
.finally(()=> {
console.log('프로미스 끝 !');
})
data.json
{
"books": [
{
"title":"작별인사",
"writer":"김영하",
"year":"2022년"
},
{
"title":"마음의 법칙",
"writer":"폴커 키츠",
"year":"2022년"
},
{
"title":"기분을 관리하면 인생이 관리된다",
"writer":"김다슬",
"year":"2022년"
},
{
"title":"무엇이 옳은가",
"writer":"후안 엔리케스",
"year":"2022년"
},
{
"title":"주린이가 가장 알고 싶은 최다질문 TOP 77",
"writer":"염승환",
"year":"2021년"
},
{
"title":"미드나잇 라이브러리",
"writer":"매트 헤이그",
"year":"2021년"
},
{
"title":"소크라테스 익스프레스",
"writer":"에릭 와이너",
"year":"2021년"
},
{
"title":"달러구트 꿈 백화점 2",
"writer":"이미예",
"year":"2021년"
},
{
"title":"달러구트 꿈 백화점",
"writer":"이미예",
"year":"2020년"
},
{
"title":"공정하다는 착각",
"writer":"마이클 샌델",
"year":"2020년"
},
{
"title":"2030 축의 전환",
"writer":"마우로 기옌",
"year":"2020년"
},
{
"title":"기분이 태도가 되지 않게",
"writer":"레몬심리",
"year":"2020년"
},
{
"title":"여행의 이유",
"writer":"김영하",
"year":"2019년"
},
{
"title":"철학은 어떻게 삶의 무기가 되는가",
"writer":"야마구치 슈",
"year":"2019년"
},
{
"title":"아주 작은 습관의 힘",
"writer":"제임스 클리어",
"year":"2019년"
},
{
"title":"인어가 잠든 집",
"writer":"히가시노 게이고",
"year":"2019년"
}
]
}
style.css
* { padding: 0; margin: 0; box-sizing: border-box; }
body {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 14px;
}
#wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
header {
height: 110px;
line-height: 110px;
}
h1 {
cursor: pointer;
}
.btn {
width: 190px;
height: 35px;
line-height: 35px;
margin: 0 5px;
outline: none;
border: none;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.books {
position: absolute;
left: 50%;
top: 180px;
transform: translateX(-50%);
width: 800px;
/* background-color: pink; */
}
.another {
top: 220px;
/* background-color: palegoldenrod; */
}
.book td {
border-bottom: 1px solid black;
padding: 10px 0;
}
.book th {
border-bottom: 1px solid black;
padding: 10px 0;
}