자바스크립트 JSON 데이터를 자바스크립트에서 가져와서 형식을 유지하면서 저장하는 방법

JSON은 JavaScript Object Notation의 약자로, 데이터를 효율적으로 표현하기 위한 경량 데이터 형식입니다. 자바스크립트에서는 JSON.parse() 메서드를 사용하여 JSON 데이터를 자바스크립트 객체로 변환할 수 있습니다. 마찬가지로, JSON.stringify() 메서드를 사용하여 자바스크립트 객체를 JSON 형식의 문자열로 변환할 수 있습니다.

JSON 데이터를 가져와서 형식을 유지하면서 저장하기 위해서는 다음과 같은 단계를 따라갈 수 있습니다:

  1. JSON 데이터를 가져옵니다. 이는 보통 API 요청, 파일 로드 등을 통해 이루어집니다.
  2. 가져온 JSON 데이터를 자바스크립트 객체로 변환합니다. 이를 위해 JSON.parse() 메서드를 사용합니다.
  3. 변환된 자바스크립트 객체를 원하는 형식에 따라 수정하고 조작합니다.
  4. 필요한 경우, 수정된 자바스크립트 객체를 다시 JSON 형식의 문자열로 변환합니다. 이를 위해 JSON.stringify() 메서드를 사용합니다.
  5. 변환된 JSON 문자열을 저장합니다. 이는 로컬 스토리지, 데이터베이스, 파일 등 여러 가지 방법을 활용할 수 있습니다.

아래는 위에서 설명한 방법을 사용하여 JSON 데이터를 자바스크립트에서 가져와서 형식을 유지하면서 저장하는 예시 코드입니다.

// JSON 데이터 가져오기 (예시)
const jsonStr = '{"name":"John","age":30,"city":"New York"}';

// JSON 데이터를 자바스크립트 객체로 변환
const jsonObj = JSON.parse(jsonStr);

// 자바스크립트 객체 형식에 맞게 수정 및 조작
jsonObj.age += 1;

// 수정된 자바스크립트 객체를 다시 JSON 형식의 문자열로 변환
const modifiedJsonStr = JSON.stringify(jsonObj);

// JSON 문자열 저장 예시 (로컬 스토리지 사용)
localStorage.setItem("modifiedData", modifiedJsonStr);

위의 예시에서는 jsonStr이라는 변수에 JSON 형식의 문자열을 대입하고, JSON.parse() 메서드를 사용하여 jsonStr을 자바스크립트 객체로 변환합니다. 그 후, jsonObj라는 변수에 변환된 객체를 할당합니다.

다음으로, jsonObj를 수정하고 조작한 후에는 JSON.stringify() 메서드를 사용하여 다시 JSON 형식의 문자열로 변환합니다. 이를 modifiedJsonStr 변수에 할당합니다.

마지막으로, modifiedJsonStr을 저장하는 예시로 로컬 스토리지를 활용하였습니다. localStorage.setItem() 메서드를 사용하여 modifiedJsonStr을 “modifiedData”라는 키로 로컬 스토리지에 저장합니다.

이와 같이 JSON 데이터를 자바스크립트에서 가져와서 형식을 유지하면서 저장할 수 있습니다. 이 방법은 다양한 상황에서 유용하게 사용될 수 있습니다.