JSON(JavaScript Object Notation)은 자바스크립트 객체와 배열을 표현하고 전송하기 위한 경량 데이터 형식입니다. 자바스크립트에서 JSON 데이터를 가져와서 변경하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, JSON 데이터를 가져오기 위해 XMLHttpRequest 객체나 fetch API를 사용할 수 있습니다. 아래는 XMLHttpRequest 객체를 사용하여 JSON 데이터를 가져오는 예제 코드입니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
    if (xhr.status == 200) {
        let data = JSON.parse(xhr.responseText);
        // JSON 데이터 사용하기
        console.log(data);
    }
};
xhr.send();

위의 코드에서 ‘data.json’은 JSON 데이터를 포함하고 있는 파일의 경로입니다. xhr.responseText를 사용하여 가져온 JSON 데이터를 문자열로 변환한 후, JSON.parse()를 사용하여 자바스크립트 객체로 변환합니다.

2. JSON 데이터 변경하기

JSON 데이터를 자바스크립트로 변경하기 위해서는 가져온 JSON 객체의 속성에 접근하여 값을 수정하면 됩니다. 아래는 가져온 JSON 데이터를 변경하는 예제 코드입니다.

// 전체 JSON 객체 변경
data.name = 'John';
data.age = 25;

// 중첩된 객체 변경
data.address.city = 'New York';
data.address.state = 'NY';

// 배열 요소 변경
data.skills[0] = 'JavaScript';
data.skills.push('Node.js');

위의 코드에서 data는 가져온 JSON 데이터를 자바스크립트 객체로 변환한 변수입니다. .name, .age와 같은 방식으로 객체의 속성에 접근하여 값을 변경할 수 있습니다. 중첩된 객체의 경우, .address.city, .address.state와 같은 방식으로 접근하여 값을 변경할 수 있습니다. 배열의 경우, 인덱스를 사용하여 요소의 값을 변경할 수 있고, .push()를 사용하여 새로운 요소를 추가할 수 있습니다.

3. 변경된 JSON 데이터 다시 JSON으로 변환하기

JSON 데이터를 변경한 후, 다시 JSON 형식으로 변환하려면 JSON.stringify()를 사용하면 됩니다. 아래는 변경된 JSON 데이터를 다시 JSON 형식으로 변환하는 예제 코드입니다.

let jsonString = JSON.stringify(data);
console.log(jsonString);

위의 코드에서 data는 변경된 JSON 데이터를 저장한 변수입니다. JSON.stringify()를 사용하여 자바스크립트 객체를 JSON 형식의 문자열로 변환합니다.

JSON은 데이터 교환을 위한 간편하고 유연한 형식입니다. 자바스크립트에서 JSON 데이터를 가져와서 변경하는 방법을 알아보았습니다. JSON 데이터를 자바스크립트로 가져와서 원하는 대로 변경하여 활용할 수 있습니다.