자바스크립트 JSON 데이터를 자바스크립트로 가져와 화면에 표시하는 방법

10 Sep 2023

javascript

JSON (JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 데이터 교환 형식입니다. 자바스크립트에서 JSON 데이터를 로드하고 화면에 표시하는 방법을 알아보겠습니다.

JSON 데이터 가져오기

JSON 데이터를 자바스크립트로 가져오기 위해 XMLHttpRequest 또는 fetch API를 사용할 수 있습니다. XMLHttpRequest를 사용하는 예제를 살펴보겠습니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // JSON 데이터가 있는 URL 또는 파일의 경로를 지정합니다.
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        // 가져온 JSON 데이터를 자바스크립트 객체로 변환합니다.
        displayData(jsonData); // 화면에 데이터를 표시하는 함수를 호출합니다.
    }
};
xhr.send();

fetch API를 사용한 예제도 살펴보겠습니다:

fetch('data.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(jsonData) {
        displayData(jsonData); // 화면에 데이터를 표시하는 함수를 호출합니다.
    })
    .catch(function(error) {
        console.error('Error:', error);
    });

위의 코드에서 displayData 함수는 가져온 JSON 데이터를 화면에 표시하는 로직을 포함하고 있습니다.

JSON 데이터 화면에 표시하기

JSON 데이터를 화면에 표시하기 위해서는 DOM (Document Object Model)을 사용하여 요소를 동적으로 생성하고 결합해야 합니다. 예를 들어, HTML의 <ul> 요소에 JSON 데이터를 순회하며 <li> 요소로 표시할 수 있습니다:

function displayData(jsonData) {
    var ul = document.createElement('ul');

    jsonData.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item.name;
        ul.appendChild(li);
    });

    document.body.appendChild(ul);
}

위의 코드는 JSON 데이터의 각 요소의 name 속성을 가져와 <li> 요소에 텍스트로 추가한 후, <ul>에 추가합니다. 이후 <ul>을 <body> 요소에 추가합니다.

위의 예제는 JSON 데이터의 구조에 따라 적합하게 수정해야 할 수 있습니다. JSON 데이터의 키와 값에 따라 다른 요소를 생성하거나 복잡한 구조를 다룰 수도 있습니다.

이것은 자바스크립트에서 JSON 데이터를 가져와 화면에 표시하는 간단한 방법에 대한 예시입니다. JSON 데이터의 구조와 화면 표시 요구사항에 따라 코드를 커스터마이즈해야 할 수 있습니다.