JavaScript 객체를 JSON으로 변환

1. console.log(jsObject)로 JavaScript 객체 보기
2. JSON.stringify()를 사용하여 JSON 객체를 문자열로 변환
3. 사용자 정의 작성 코드를 사용하여 JavaScript 객체를 JSON으로 변환
4. JSON 문자열에서 JavaScript 개체 다시 가져오기

JSON은 자바스크립트에서 객체를 표현하기 위해 일반적으로 사용되는 데이터 전송 형식입니다. 데이터 전송을 위한 대부분의 클라이언트-서버 통신에서 JSON 형식을 표준 형식으로 사용합니다. JSON 표기법은 JavaScript 객체의 사람이 읽을 수 있는 형식이므로 사용하고 해석하기 쉽습니다. 자바스크립트 객체를 JSON 형식으로 변환하는 것은 쉽습니다. 다음과 같은 방법으로 변환할 수 있습니다.

console.log(jsObject)로 JavaScript 객체 보기

console.log 기능은 웹 콘솔에 메시지를 출력하도록 구축되었습니다. 웹 브라우저의 개발자 도구를 사용하여 메시지를 볼 수 있습니다. conosle.log() 함수는 개체, 메시지 및 하위 문자열을 허용합니다. 따라서 JavaScript 객체의 모양을 이해하는 데 가장 적합합니다. 객체를 보유하는 변수를 console.log할 때 시각적 JSON 표현을 얻습니다. 다음 코드는 console.log를 사용하여 자바스크립트 객체를 표현한 것입니다.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

출력:

{id: 1, name: "icy-cream", flavor: "vanilla"}

위 코드에서 console.log(a)는 a 객체의 JSON 형식을 출력합니다. conosle.log()가 비친화적인 인터넷 익스플로러를 포함한 모든 브라우저에서 지원되기 때문에 자바스크립트 객체에 대해 모든 브라우저에서 동일한 JSON 표현을 받게 됩니다. console.log() 옵션을 통해 객체의 JSON 표현만 볼 수 있으며 웹 콘솔에서 보는 것 외에 다른 프로그래밍 방식의 데이터 처리에 사용하거나 편집할 수 없습니다.

JSON.stringify()를 사용하여 JSON 객체를 문자열로 변환

자바스크립트 객체에 대한 JSON 표현을 얻는 또 다른 방법은 JSON.stringify() 메서드를 사용하는 것입니다. JavaScript 객체의 JSON 형식을 사용하고 JSON.stringify() 메서드를 사용하여 변수에 할당할 수 있습니다. JSON.stringify()는 자바스크립트 객체를 변환하고 객체에 대한 JSON 값을 문자열 데이터로 반환합니다.

통사론

JSON.stringify(<JSObject>)

매개변수

이 함수는 JavaScript 객체를 매개변수로 사용하고 replacer 기능을, space count는 선택적 매개변수로 허용합니다.

• JSON.stringify() 함수의 첫 번째 매개변수로 JSON으로 변환할 대상 JavaScript 객체를 제공합니다.
• replacer 기능을 사용하여 JSON 객체를 변경합니다. 이를 사용하여 JSON 형식으로 변환하기 전에 개체에서 필터링할 속성을 지정할 수 있습니다.
• space count 매개변수는 사람이 읽을 수 있는 형식으로 만들기 위해 출력 JSON 문자열에 넣을 공백 문자 수를 지정하는 숫자 또는 문자열 값입니다.

반환 값

JSON.stringify()는 JavaScript 객체의 문자열 JSON 형식을 반환합니다.

용법

이전 섹션에서 사용한 것과 동일한 개체를 사용하겠습니다. 하지만 이번에는 JSON.stringify()를 사용하여 JSON 문자열로 변환합니다. 다음 코드를 참조하십시오.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

출력:

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

JSON.stringify() 함수에 대한 세 번째 매개변수의 숫자를 사용하면 더 읽기 쉬운 JSON 문자열을 출력으로 얻을 수 있습니다. 메서드는 JSON의 각 키-값 쌍 앞에 지정된 수의 공백을 추가하여 JSON의 형식을 지정합니다. 예를 들어 JSON.stringify(a, null, 5)에서 a 개체의 id 매개변수는 5개의 공백 문자 뒤에 배치됩니다.

사용자 정의 작성 코드를 사용하여 JavaScript 객체를 JSON으로 변환

JavaScript 객체를 JSON 형식으로 변환하는 코드를 작성하려면 Object.keys() 함수를 사용해야 합니다. Object.keys()는 객체의 keys를 추출하고 keys를 포함하는 배열을 반환하는 자바스크립트 메서드입니다. 따라서 사용자 지정 코드를 사용하여 자바스크립트 객체의 keys와 values를 결합하고 {} 중괄호 안에 포함하여 javascript 객체의 JSON 표현을 얻습니다. 아래 코드를 살펴보자.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

출력:

{"id":"1","name":"icy-cream","flavor":"vanilla",}

JSON 문자열에서 JavaScript 개체 다시 가져오기

대부분의 웹 응용 프로그램에서 JavaScript 개체를 JSON 문자열로 데이터베이스에 저장하여 나중에 동일한 UI를 다시 렌더링하는 데 쉽게 사용할 수 있도록 합니다. JSON을 데이터베이스에 JSON 문자열로 저장할 수 있습니다. REST API를 사용하여 데이터베이스에서 가져온 JSON 문자열에 해당하는 JSON 또는 JavaScript 객체를 다시 가져오려면 어떻게 해야 합니까? JavaScript에는 JSON을 JavaScript 객체로 다시 변환하기 위한 JSON.parse() 메소드가 있습니다. 다음 코드를 참조하십시오.

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

출력:

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

위의 코드를 사용하여 JSON.parse() 메서드를 통해 JSON 문자열을 다시 javascript 객체로 변환하고 변수에 할당했습니다. 동일한 자바스크립트 객체의 id 속성 값을 변경하면 속성 값도 변경됩니다. 따라서 문자열 JSON을 코드에서 프로그래밍 방식으로 처리할 수 있는 유효한 자바스크립트 객체로 변환할 수 있습니다. 물결표 문자를 사용하여 여러 줄 바꿈이 있는 문자열을 받아들일 수 있습니다.