[ Javascript ] fetch로 JSON파일 읽어오기

# 코드

// json파일읽어오는 fetch
function fetchData() {

  // 반환값을 받을 Promise 객체 생성
  return new Promise(function (receive) {
    fetch("./202104.json") // json 파일 읽어오기
      .then(function (response) {
        return response.json(); // 읽어온 데이터를 json으로 변환
      })
      .then(function (data) { 
        receive(JSON.stringify(data)); // json파일을 텍스트로
      });
  });
}

(async function () { 
  // fetchData() 함수를 호출해 fetch() 후 두번의 .then()을 거치는 동안을 기다려 
  // 반환되는 값을 받는다.
  jsonData = await fetchData(); 
  $(".getJson").text(jsonData);
})();

 

# 코드 설명

동일한 폴더안의 202104.json파일을 읽어와 getJson 클래스가 담긴 HTML태그에 출력시킨다.

 

# 참조 링크

senticoding.tistory.com/42

내부함수에서 외부함수로 리턴값 전달하기, 프로미스 리턴하기

proinlab.com/archives/2086

Javascript Promise 객체 활용 – Value 처리