[javascript] JSON 데이터를 테이블로 표시하기

15 Dec 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량의 데이터 교환 형식이며, JavaScript에서 쉽게 다룰 수 있습니다. 웹 애플리케이션에서 받은 JSON 데이터를 테이블 형식으로 표시하는 방법에 대해 알아보겠습니다.

JSON 데이터 가져오기

JSON 데이터를 가져오기 위해서는 XMLHttpRequest나 Fetch API를 사용하여 서버에서 데이터를 가져와야 합니다. 아래는 Fetch API를 사용하여 JSON 데이터를 가져오는 예제입니다.

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터를 처리하고 테이블로 표시하는 함수 호출
    displayDataInTable(data);
  });

데이터를 테이블로 표시하기

JSON 데이터를 테이블로 표시하기 위해서는 HTML과 JavaScript를 사용하여 동적으로 테이블을 생성해야 합니다. 아래는 JSON 데이터를 테이블로 표시하는 간단한 예제입니다.

function displayDataInTable(data) {
  const table = document.createElement('table');
  const header = table.createTHead();
  const row = header.insertRow();
  for (const key in data[0]) {
    const th = document.createElement('th');
    th.appendChild(document.createTextNode(key));
    row.appendChild(th);
  }
  const body = table.createTBody();
  data.forEach(item => {
    const row = body.insertRow();
    for (const key in item) {
      const cell = row.insertCell();
      cell.appendChild(document.createTextNode(item[key]));
    }
  });
  document.body.appendChild(table);
}

위의 코드는 JSON 데이터를 테이블로 변환하여 화면에 표시합니다.

결론

JSON 데이터를 테이블로 표시하는 것은 웹 애플리케이션에서 매우 유용한 기능입니다. 데이터를 시각적으로 표현할 수 있음으로써 사용자에게 더 나은 경험을 제공할 수 있습니다.

참고 자료:

위의 예제 코드를 참고하여, JSON 데이터를 테이블로 표시하는 웹 애플리케이션을 만들어보세요!