JSON(Javascript Object Notation)은 데이터를 교환하는 표준 형식으로 자바스크립트에서 사용되는 일반적인 데이터 형식입니다. 자바스크립트에서는 JSON 데이터를 가져와서 필요에 따라 조작하고 변경할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 JSON 데이터를 가져와서 변경하기 위한 몇 가지 방법을 살펴보겠습니다.

1. JSON 데이터 가져오기

JSON 데이터를 자바스크립트로 가져오기 위해서는 XMLHttpRequest 혹은 fetch API를 사용할 수 있습니다. 이를 통해 서버에서 JSON 데이터를 가져올 수 있습니다. 예를 들어, 다음과 같이 fetch API를 사용하여 JSON 데이터를 가져올 수 있습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 사용하여 작업 수행
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 예제에서 fetch 함수는 주어진 URL에서 데이터를 가져오며, response.json() 메서드를 사용하여 JSON 데이터로 변환합니다. 그리고 나서 then 메서드를 이용하여 JSON 데이터를 사용하는 작업을 정의할 수 있습니다.

2. JSON 데이터 조작하기

자바스크립트에서는 JSON 데이터를 일반적인 자바스크립트 객체로 변환하여 조작할 수 있습니다. 예를 들어, 다음과 같이 JSON 데이터를 가져온 후 객체로 변환하고 값을 변경할 수 있습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 객체로 변환하고 값 변경
    const modifiedData = JSON.parse(JSON.stringify(data));
    modifiedData.name = 'John Doe';
    
    console.log(modifiedData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 예제에서 JSON.parse() 함수를 사용하여 JSON 데이터를 자바스크립트 객체로 변환하고, JSON.stringify() 함수를 사용하여 다시 JSON 형식으로 변환합니다. 이를 통해 JSON 데이터를 조작하고 필요에 따라 값을 변경할 수 있습니다.

3. JSON 데이터 값 변경하기

JSON 데이터의 값을 변경하려면 해당 값을 직접 업데이트하거나 반복문을 사용하여 여러 값을 변경할 수 있습니다. 예를 들어, 다음과 같이 반복문을 사용하여 JSON 데이터의 모든 항목의 값을 변경할 수 있습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터의 값 변경
    const modifiedData = JSON.parse(JSON.stringify(data));
    
    for (let item of modifiedData.items) {
      item.quantity += 1;
    }

    console.log(modifiedData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 예제에서는 for...of 루프를 사용하여 items 배열의 모든 항목의 quantity 값을 1씩 증가시켰습니다. 이와 같은 방식으로 JSON 데이터의 값을 변경할 수 있습니다.

결론

자바스크립트에서 JSON 데이터를 가져와서 변경하는 방법을 살펴보았습니다. fetch API를 사용하여 JSON 데이터를 가져오고, 객체로 변환하여 필요에 따라 조작하고 값을 변경할 수 있습니다. 이를 통해 자바스크립트에서 다양한 작업을 수행할 수 있습니다. JSON 데이터를 가져와서 자바스크립트에서 사용하기 위해 이러한 방법을 익혀보세요!