자바스크립트에서 JSON 데이터를 받아와 출력하는 방법

15 Sep 2023

javascript

XMLHttpRequest를 이용한 방법

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

jQuery를 이용한 방법

$.getJSON("data.json", function(response) {
    console.log(response);
});

fetch API를 이용한 방법 (ES6 이상)

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

위의 예시 코드들은 모두 JSON 데이터를 비동기적으로 받아오고, 받아온 데이터를 JavaScript 객체로 변환하여 출력하는 방법입니다.

주의할 점은, 위의 예시에서 “data.json” 부분은 실제 JSON 데이터가 있는 URL이나 파일 경로로 대체되어야 합니다. 또한, 이 코드들은 모두 “console.log”를 통해 데이터를 출력하고 있으니 이를 원하는 방식으로 변경하십시오.

이제 위의 방법을 사용하여 JSON 데이터를 받아와서 자유롭게 활용할 수 있습니다.

#JavaScript #JSON