[Javascript] 객체를 JSON으로 변환하기

 

Javascript에서 사용하는 객체(Object)를 네트워크를 통해 전송하려면 어떻게 해야 할까요?

Javascript의 객체를 그대로 서버로 전송할 수는 없습니다.

Javascript에서는 주로 객체를 JSON(JavaScript Object Notation) 형식으로 변환하여 전달합니다.

(Javascript가 아닌 언어에서도 데이터 교환 목적으로 JSON 형식을 많이 사용합니다.)

 

이번에는 Javascript 객체를 JSON 형식으로 변환하는 방법을 알아보겠습니다.

 

1. JSON.stringify() 함수
2. 특정 항목만 JSON으로 변환하기
3. 들여쓰기(indent) 설정하기

 

 

1. JSON.stringify() 함수

JSON.stringify() 함수

JSON.stringify(value[, replacer[, space]])

JSON.stringify() 함수는 Javascript의 값이나 객체를 JSON 문자열로 변환합니다.

 

 파라미터 

value (필수)

JSON 문자열로 변환할 값 또는 객체

 

replacer (optional)

JSON 변경 규칙을 정의 할 함수 또는 JSON에 포함 될 프로퍼티(속성)을 가지는 배열

 

space (optional)

들여쓰기 공백 갯수 또는 문자열

 

 예제 

const obj = {
  id : 123,
  product : {
    type : 'book',
    page : 200,
    title : 'Javascript',
    tags : ['JS', 'Beginner']
  }
};

const json = JSON.stringify(obj);

document.write(typeof obj + '<br>'); // object
document.write(typeof json + '<br>'); // string
document.write(json + '<br>');

 

 

JSON.stringify() 함수를 이용하여

Javascript 객체를 JSON 형식의 문자열로 변환하였습니다.

 

JSON 형식의 특징

- 문자열을 감쌀 때 쌍따옴표("")를 사용합니다.

예제를 보면, 홑따옴표로 감싸서 정의했던 문자열('book', 'Javascript', 'JS', 'Begineer')이 모두 쌍따옴표로 감싸진 것을 볼 수 있습니다.

 

- 프로퍼티 키(property key)는 쌍따옴표("")로 감싸져야 합니다.

예제를 보면, 모든 속성의 키가 JSON에서는 쌍따옴표로 감싸진 것을 볼 수 있습니다.

 

- 주석을 작성할 수 없습니다.

 

JSON.stringify() 함수로 변환되지 않는 항목

const obj = {
  x : undefined,
  y : Symbol(''),
  z : function()  {
    alert('Hi')
  },
  arr : [
    1, 
    undefined, 
    Symbol(''), 
    function() {alert('Hi')}
  ]
};

const json = JSON.stringify(obj);

document.write(json);

JSON.stringify() 함수로 객체를 JSON 형태의 문자열로 변환할 때

undefined, Symbol, function은 변환되지 않고 무시됩니다.

만약, undefined, Symbol, function이 배열 안에 있다면 이 값들은 null로 전환되어 표시됩니다.

 

위 예제에서 객체 안에 있는 undefined, Symbol, function이 JSON으로 변환되면서 모두 무시되었고,

배열 안의 undefined, Symbol, function은 null로 변경 된 것을 확인 할 수 있습니다.

 

 

 

2. 특정 항목만 JSON으로 변환하기

replacer

JSON.stringify() 함수는 두번째 파라미터로 replacer를 받습니다.

이 값은 배열이 될 수도 있고, 함수가 될 수도 있습니다.

이 replacer를 이용하여, Javascript 객체에서 JSON 문자열로 변환 할 property(속성)을 지정할 수 있습니다.

 

replacer가 배열인 경우

 배열 replacer 예제 1. 

const obj = {
  x : 'x',
  y : 'y',
  z : {
    z1: 'z1'
  }

};

const json = JSON.stringify(obj, ['y', 'z']);

document.write(json);

JSON.stringify() 함수의 2번째 파라미터로 JSON으로 변환 할 속성명을 포함하는 배열을 전달하였습니다.

위 예제에서는,

'y', 'z' 2개의 속성만을 JSON으로 변환하도록 하였습니다.

그런데, 'z' 속성이 가지고 있는 객체에 포함 된 'z1'은 제대로 변환되지 않았습니다.

'z1' 속성도 JSON 문자열에 포함시키고 싶다면,

다음과 같이 'z1'도 replacer 배열에 포함시켜 주어야 합니다.

 

 배열 replacer 예제 2. 

const obj = {
  x : 'x',
  y : 'y',
  z : {
    z1: 'z1'
  }

};

const json = JSON.stringify(obj, ['y', 'z', 'z1']);

document.write(json);

'z1'도 배열에 포함시키니, 'z' 속성의 값인 객체('z1'을 포함하고 있는)도 JSON 문자열로 변환이 되었습니다.

 

replacer가 함수인 경우

replacer는 함수가 될 수도 있습니다.

JSON으로 변환할 속성을 일일히 나열하기 힘들 다거나, 특별한 조건을 주어야 할 때 유용합니다.

 

 함수 replacer 예제 1. JSON으로 변환할 항목 선택하기 

const obj = {
  x : 'x',
  y : 'y',
  z : {
    z1: 'z1'
  }
};

function replacer(key, value) {
  document.write(key + " : " + value + '<br>');
  if(key === 'x') {
    return undefined;
  }else {
    return value;
  }
}

const json = JSON.stringify(obj, replacer);

document.write('JSON : ' + json);

document.write(key + " : " + value + '<br>');

replacer가 함수일 때는, 파라미터로 객체의 key와 value가 전달됩니다.

위 코드에서 replacer 함수로 전달된 객체의 모든 key와 value가 출력되는 것을 확인 할 수 있습니다.

(가장 먼저 찍히는 ': [object Object]'는 JSON으로 변환할 'obj' 객체를 가리킵니다.)

 

replacer 함수에서 undefined를 반환하면 해당 속성은 JSON으로 변환되지 않고 무시됩니다.

위 예제에서 속성 'x'는 JSON 문자열에 포함시키지 않기 위해서 undefined를 리턴하였습니다.

 

replacer 함수에서 특정 문자열이나 숫자값을 반환하면,

그 값은 해당 속성의 값으로 JSON으로 변환됩니다.

위 예제에서 속성 'x'가 아닌 경우에는, 해당 속성의 value를 그대로 리턴해서,

원래의 속성값이 그대로 JSON으로 변환되도록 하였습니다.

 

 

 함수 replacer 예제 2. JSON으로 변환 시 속성 값 변경하기 

const obj = {
  x : 1,
  y : 2
};

function replacer(key, value) {
  if(key === 'x') {
    return value + 1;
  }else {
    return value;
  }
}

const json = JSON.stringify(obj, replacer);

document.write('JSON : ' + json);

위와 같이 replacer 함수를 작성하여, 객체를 JSON으로 변환할 때, 특정 속성의 값을 변경할 수 있습니다.

위 코드는 속성명이 'x'일 경우, 속성 'x'의 값에 1을 더하여서 리턴하고 있습니다.

그리고, 생성된 JSON의 'x' 속성 값은 replacer 함수에서 변형하여 리턴한 '2'인 것을 확인 할 수 있습니다.

 

 

 

3. 들여쓰기(indent) 설정하기

JSON.stringify() 함수는 3번째 파라미터로 space를 입력 받습니다.

이 값은 숫자가 될 수도 있고, 문자열이 될 수도 있습니다.

이 값을 이용해서 JSON 문자열의 들여쓰기 간격을 지정할 수 있습니다.

숫자로 space 지정하기

const obj = {
  x : 'x',
  y : 'y',
  z : {
    z1 : 'z1'
  }
};

const json = JSON.stringify(obj, null, 5);

document.write('<pre>' + json+ '</pre>');

JSON.stringify() 함수의 3번째 파라미터 space에 숫자가 지정되면,

해당 숫자만큼 들여쓰기가 적용된 JSON 문자열이 생성됩니다.

위 예제 코드에서는 , JSON.stringify() 함수의 3번째 파라미터로 숫자 5를 지정하였습니다.

생성된 JSON 문자열은 5개의 스페이스만큼 들여쓰기가 되었습니다.

이 때, 숫자는 최대 10까지 지정할 수 있고, 만약 숫자 10을 넘는 숫자가 space값으로 지정되면,

10만큼만 들여쓰기가 적용됩니다.

 

문자로 space 지정하기

const obj = {
  x : 'x',
  y : 'y',
  z : {
    z1 : 'z1'
  }
};

const json = JSON.stringify(obj, null, '**');

document.write('<pre>' + json+ '</pre>');

JSON.stringify() 함수의 3번째 파라미터인 space에 문자열을 지정하면,

해당 문자열을 들여쓰기 자리에 넣어줍니다.

만약, 문자열의 길이가 10을 넘어가면, 앞에서부터 10자리까지만 들여쓰기 자리에 넣어줍니다.

 

---

 

JSON.stringify() 함수를 이용해서

Javascript 객체를 JSON 형식의 문자열로 변환하는 방법을 알아보았습니다.

다음 포스팅에서는 JSON 형식의 문자열을 Javascript 객체로 변환하는 방법을 알아보도록 하겠습니다.