자바스크립트는 웹 개발에서 많이 사용되는 프로그래밍 언어로, JSON 데이터를 활용하여 동적으로 UI를 업데이트할 수 있습니다. JSON은 JavaScript Object Notation의 약자로, 데이터를 표현하는 형식 중 하나입니다.

JSON 데이터 불러오기

JSON 데이터를 불러와서 자바스크립트에서 활용하기 위해서는 AJAX 요청을 통해 서버에서 데이터를 받아와야 합니다. 아래는 AJAX를 이용하여 JSON 데이터를 불러오는 예시 코드입니다. 이 예시에서는 fetch 함수를 사용하여 데이터를 비동기적으로 받아옵니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터가 정상적으로 받아와졌을 경우 실행되는 코드
    // 받아온 JSON 데이터를 활용하여 UI 업데이트
  })
  .catch(error => {
    // 데이터를 받아오는 과정에서 에러가 발생했을 경우 실행되는 코드
    console.log('데이터를 불러오는데 실패했습니다:', error);
  });

위 코드에서 data.json은 불러올 JSON 데이터의 경로입니다. 경로를 올바르게 설정하여 데이터를 가져올 수 있도록 해야 합니다.

UI 업데이트하기

JSON 데이터를 성공적으로 받아왔을 경우, 받아온 데이터를 활용하여 UI를 업데이트할 수 있습니다. 예를 들어, 받아온 JSON 데이터를 사용하여 동적으로 리스트를 생성하는 예시 코드는 다음과 같습니다.

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' }
];

const listElement = document.getElementById('list');

data.forEach(item => {
  const listItem = document.createElement('li');
  listItem.textContent = item.name;
  listElement.appendChild(listItem);
});

위 예시에서는 data라는 변수에 JSON 데이터를 저장한 후, forEach 함수를 사용하여 각 데이터를 반복적으로 처리합니다. 각 데이터마다 리스트 아이템을 생성하고, 그 안에 데이터의 이름을 넣어줍니다. 마지막으로, 생성한 리스트 아이템을 실제 리스트에 추가합니다.

이와 같은 방법으로 JSON 데이터를 활용하여 동적으로 UI를 업데이트할 수 있습니다.

#javascript #json