JS#1. Json 파일 fetch로 동적으로 받아오고 화면에 출력하기

 

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

Using Fetch

https://academy.dream-coding.com/courses/mini-shopping 

쇼핑몰 미니게임 클론코딩 & 코드 리뷰