Json 파일 동적으로 받아와서 출력 해보겠다.
먼저 Json 파일의 형식은 다음과 같다.
data폴더 안에 있는 data.json
{
"items": [
{
"type": "tshirt",
"gender": "female",
"size": "large",
"color": "pink",
"image": "../img/pink_t.png"
},
{
"type": "pants",
"gender": "male",
"size": "small",
"color": "blue",
"image": "../img/blue_p.png"
},
{
"type": "pants",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_p.png"
}
]
}
main.js에서 먼저 item을 동적으로 받기 위해 loadItem이라는 함수를 만들었다.
function loadItems() {
return fetch("data/data.json")
.then((response) => response.json())
.then((json) => json.items);
}
//아이템 동적으로 받아오기
loadItems().then((items) => {
console.log(items);
});
fetch 를 통해 해당하는 파일의 경로를 통해 data.json에 쉽게 접근할 수 있다.
.then을 통해 성공적으로 받아오면 response를 얻을 수 있다.
response를 출력해 보면 다음과 같은 정보들을 얻을 수 있다.
여기서 .json 형태로 변환하기 위해 response.json()을 하면 json 형태로 변환된다.
여기서 전체 json을 return하지 않고 json에 있는 items만 받아오기 위해 json.items을 사용한다.
이렇게 받은 items을 사용하여 화면에 출력해 보겠다.
loadItems().then((items) => {
console.log(items);
displayItems(items); // 화면에 출력.
});
displayItems 함수를 선언하여 화면에 출력할 것이다.
//받아온 items를 display 화면에 보여주기
function displayItems(items) {
const container = document.querySelector(".items");
container.innerHTML = items.map((item) => createHTMLString(item)).join(""); // join을 해서 붙여줘야함
}
//items object를 HTML li형태로 리턴
function createHTMLString(item) {
return `
<li class="item">
<img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
<span class="item__description">${item.gender}, ${item.size}</span>
</li>`;
}
먼저 HTML에 ul로 items를 만들어 주고 main.js에서 querySelector로 받아와 container에 저장한다.
그 후 , innerHTML 을 사용해 추가해 주는데 items에 map을 이용하여 넣어준다.
items object를 html 형태로 넣어주기 위해 createHTMLString 함수를 선언하고 li형태로 return 받은 후 join 을 사용해 붙여준다.
그러면 HTML class가 items인 ul 태그 안에 li 태그들이 추가되면서 화면에 보여지게 된다.
#참고
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://academy.dream-coding.com/courses/mini-shopping
'Web > JavaScript' 카테고리의 다른 글
#3 JavaScript 코드 품질 (0) | 2020.12.31 |
---|---|
#2 JavaScript 코어 기본 정리. (0) | 2020.12.27 |