JSON (JavaScript Object Notation) 정리

1. Object에서 JSON으로 변경 : JSON.stringify 사용
var json = JSON.stringify(obj);

2. JSON에서 Object로 변경 : JSON.parse 사용
var obj = JSON.parse(json);

 

* 크롬의 개발자도구(F12)의 Console탭에서 아래 소스를 입력하며 테스트

// 테스트할 obj 객체 생성
var obj = {'1':'apple', '2':'banana', '3':'mango'};
obj // 객체 확인
{1: 'apple', 2: 'banana', 3: 'mango'}

// Object => JSON
var json = JSON.stringify(obj);
json // json으로 변환된 모습을 확인할 수 있음
'{"1":"apple","2":"banana","3":"mango"}'

// JSON => Object
var obj = JSON.parse(json);
obj // json이 객체로 변환된 모습을 확인할 수 있음
{1: 'apple', 2: 'banana', 3: 'mango'}

 

* JSON.stringify, JSON.parse 사용시 콜백함수를 설정하여 변환에 관여할 수가 있음

// JSON.stringify에 콜백 함수 설정
JSON.stringify(obj, function(key, value){
    console.log("key : " + key + ", value : " + value);  // key, value값을 출력
    return (key === "1") ? "grape" : value;
});

// console.log 출력 내용
key : , value : [object Object]
key : 1, value : apple
key : 2, value : banana
key : 3, value : mango

// apple이 grape로 변경된 것을 확인할 수 있음
'{"1":"grape","2":"banana","3":"mango"}'

// ----------------------------------------------------------------------------
// JSON.parse 콜백 함수 설정
JSON.parse(json, function(key, value){
    console.log("key : " + key + ", value : " + value);  // key, value값을 출력    
    return (key === "1") ? ["aaa", "bbb"] : value;
});

// console.log 출력 내용
key : 1, value : apple
key : 2, value : banana
key : 3, value : mango
key : , value : [object Object]

// apple이 배열로 변경된 것을 확인할 수 있음
{1: Array(2), 2: 'banana', 3: 'mango'}