[javascript] 자바스크립트에서 JSON 파일 읽어오기

15 Dec 2023

javascript

자바스크립트에서 JSON 파일을 읽어오는 것은 일반적인 작업입니다. JSON 파일은 데이터를 구조화하고 전달하기 위한 유용한 형식이며, 자바스크립트에서는 이를 쉽게 다룰 수 있습니다. 이 글에서는 자바스크립트에서 JSON 파일을 읽어오는 방법에 대해 알아보겠습니다.

JSON 파일 읽기

자바스크립트에서 JSON 파일을 읽어오기 위해서는 fetch 함수나 XMLHttpRequest 객체를 사용할 수 있습니다. 예를 들어, fetch 함수를 사용하여 JSON 파일을 읽어오는 방법은 다음과 같습니다.

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

위 코드에서는 먼저 fetch 함수를 사용하여 data.json 파일을 가져온 다음, response.json()을 호출하여 JSON 데이터를 파싱합니다. 그리고 파싱된 데이터를 콘솔에 출력하는 예제입니다.

XMLHTTPRequest를 사용한 JSON 파일 읽기

XMLHttpRequest 객체를 사용하여 JSON 파일을 읽어오는 방법은 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status == "200") {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send(null);

위 코드에서는 먼저 XMLHttpRequest 객체를 생성한 다음, open 메서드를 사용하여 HTTP GET 요청을 설정합니다. 그리고 onreadystatechange 이벤트 핸들러에서 응답을 처리하고 JSON 데이터를 파싱하여 출력하는 예제입니다.

결론

이상으로 자바스크립트에서 JSON 파일을 읽어오는 방법에 대해 알아보았습니다. fetch 함수나 XMLHttpRequest 객체를 사용하여 간단하게 JSON 파일을 읽어올 수 있으며, 이를 통해 웹 애플리케이션에서 다양한 데이터를 손쉽게 활용할 수 있습니다.

참고 문헌:

MDN Web Docs, “Using Fetch” https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
MDN Web Docs, “XMLHttpRequest” https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest