자바스크립트는 JSON(JavaScript Object Notation) 데이터를 손쉽게 처리할 수 있는 강력한 기능을 제공합니다. 이를 활용하여 JSON 데이터를 가져와 요약 정보를 표시하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

가장 먼저, JSON 데이터를 가져와야 합니다. 이를 위해서는 서버에서 데이터를 가져오는 Ajax 요청을 사용할 수 있습니다.

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

위의 예제 코드에서는 data.json 파일에서 데이터를 가져옵니다. 가져온 데이터는 JSON.parse() 함수를 사용하여 객체로 변환됩니다. 변환된 데이터는 displaySummary() 함수에 전달됩니다.

2. 요약 정보 표시하기

다음으로, 가져온 JSON 데이터를 활용하여 요약 정보를 표시해야 합니다. 이는 DOM(Document Object Model)을 조작하여 정보를 추가하는 방식으로 구현할 수 있습니다.

function displaySummary(data) {
  var summaryElement = document.getElementById('summary');
  var html = '';
  
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    html += '<div>';
    html += '<h2>' + item.title + '</h2>';
    html += '<p>' + item.description + '</p>';
    html += '</div>';
  }
  
  summaryElement.innerHTML = html;
}

위의 코드에서는 displaySummary() 함수를 선언하여 데이터를 받아와 요약 정보를 생성합니다. HTML 문자열을 조합하여 summary 요소에 삽입하고, 각 항목의 제목과 설명을 h2와 p 태그로 감싸서 표시합니다.

마무리

위의 예제를 통해 자바스크립트에서 JSON 데이터를 이용하여 요약 정보를 표시하는 방법을 알아보았습니다. JSON 데이터를 가져오고, DOM을 조작하여 필요한 정보를 표시하는 방식으로 다양한 활용이 가능합니다. 이를 활용하여 동적이고 멋진 웹 페이지를 구현해보세요!

#javascript #JSON