[JavaScript] 자바스크립트에서 fetch()로 JSON 데이터 읽어오기

227_자바스크립트에서 fetch()로 JSON 데이터 읽어오기

[적용]

• JSON 형식의 텍스트 파일을 불러오고 싶을 때

---

[내용]

JSON 을 다루기 위해서는 데이터를 가져오는 fetch()와 JSON 포맷으로 해석하는 json()의 2단계 작업이 필요하며,

이렇게 하면 JSON 객체를 다룰 수 있다.

 

Promise를 사용하는 방법

JavaScript       

fetch('sample.json')
  .then((data) => data.json())
  .then((obj) => {
    console.log(obj);
  });

 

await와 async를 사용하는 방법

JavaScript                                                                                                                             

async function load() {
  // 파일 읽어 오기
  const data = await fetch('sample.json');
  // JSON으로 해석
  const obj = await data.json();
  console.log(obj);  // 결과: {name: "A학교", classes: Array(2)}
  // 텍스트 출력
  document.querySelector('#log').innerHTML = JSON.stringify(obj, null, ' ');
}

load();

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김