Fetch API

fetch("경로")
.then(response=> response.json())
.then(json=> console.log(json));

위와 같이 작성하기 때문에, XMLHttpRequset보다 간략히 작성할 수 있다.

HTML에 출력하기

{
  "items":[
    {
      "type":"tshrit",
      "gender":"남성",
      "size":"large",
      "color":"pink",
      "image":"imgs/pink_t.png"
    },
    {
      "type":"skrit",
      "gender":"여성",
      "size":"small",
      "color":"pink",
      "image":"imgs/pink_s.png"
    }
  ]
}

data/data.json의 내용은 위와 같다.

1. forEach

fetch("data/data.json")
.then(response=> response.json())
.then(data=> displayItems(data.items));
//작성한 후 data.itmes를 아래의 function에 담았다.
//data.items의 items는 위 json의 object 명이다. 

function displayItems(items){
  const ul= document.querySelector(".items");
  let str="";
  //선언

  items.forEach(item => {
    str= str+`<li>
      <img src="${item.image}">
      <span>${item.gender}, ${item.size}</span>
      </li>`
  });
  //data.items를 담은 변수 item을 forEach로 돌려 items의 value값의 key를 이용하여 값을 불렀다.

  ul.innerHTML= str;
}

2. Map

fetch("data/data.json")
.then(response=> response.json())
.then(data=> displayItems(data.items));
//작성한 후 data.itmes를 아래의 function에 담았다.
//data.items의 items는 위 json의 object 명이다. 

function displayItems(items){
  const ul= document.querySelector(".items");
  let str="";
  //선언
  
  str= items.map(item=>{
    return `<li class="item">
      <img src="${item.image}">
      <span>${item.gender}, ${item.size}</span>
    </li>`;
    //map으로 itmes에서 itme을 변형해서 새로운 배열으로 변환한다.
  }).join("");
  //새롭게 만들어진 배열을 join("")을 이용하여 String으로 변환시켰다. 
  
  ul.innerHTML= str;
}

HTML에 filter 걸어 출력하기

fetch("data/data.json")
.then(response=> response.json())
.then(data=> {
  displayItems(data.items)
  setEventItems(data.items)
  //❗setEventItems 함수에서 data.items를 이용하기 위해 추가되었다.
});

// ❗ function displayItems는 위 "HTML에 출력하기"와 같다.

function setEventItems(items){
  const btns= document.querySelector(".btnDiv");
  btns.addEventListener("click",function(e){
    // 이벤트값인 e를 구한다.
    // e는 target이 된(버튼이클릭된) 요소를 찾기 위함이다.
    const {key,value}= e.target.dataset;
	// dataset은 {key:value}로 되어있는데 const {key,value}를 그 값에 할당한 것이다.
    // const key에는 type/color을,
    // const value에는 tshirt/skrit/pants/blue/yellow/pink를 담았다.
    let filterd= items.filter(item=> item[key] === value);
    // data.itmes의 요소들 중 [key]가 value인 녀석만 filter처리하여 반환한다.
    displayItems(filterd);
    // displayItmes 함수를 이용해 HTML에 출력한다.
  })
}

에러가 발생할 확률이 있을 때 작성법

fetch("data/data.json")
.then(response=> response.json())
.then(data=> console.log(data));
async function fetchFun(){
	try{
      let result= await fetch("URL");
      let data= await result.json();
      console.log(data);
    }
  //👉 try{}내의 구문에서 에러가 나면
  
  	catch(err){
  	  console.log(err)
  	}
  //👉 catch{}내의 구문에서 ()매개변수로 에러값을 받아온다.
}