16. JSON

JSON [Javascript Object Notation]

• 출처: https://www.youtube.com/watch?v=FN_D4Ihs3LE [드림코딩 by 엘리]

1. JSON.stringify(obj)

• Object => JSON serialize 으로 변환
• key,value 형태의 Object 가 String(문자형)으로 변환

1. 기본구문

let json = JSON.stringify(['apple', 'banana']);

console.log(json); // 결과값 ["apple","banana"]  
console.log(typeof json); //결과값: string

const rabbit ={  
  name : 'tori',  
  color: 'white',  
  size: null,  
  birthDate: new Date(),  
};

json = JSON.stringify(rabbit);  
console.log(json);  
//결과값: {"name":"tori","color":"white","size":null,"birthDate":"2020-06-26T08:32:36.726Z"}

2. 특정 Key의 값만 가져오고 싶을경우

json =  JSON.stringify(rabbit, ['name']);
console.log(json);

//결과값: {"name":"tori"}

json =  JSON.stringify(rabbit, ['name','color']);
console.log(json);

// 결과값: {"name":"tori","color":"white"}

3. 특정값을 수정하고 싶을 경우

json = JSON.stringify(rabbit, function(key,value){
  console.log(`key:${key}, value:$${value}`);
  return key === 'name' ? 'test' : value;
});

console.log(json);

// 결과값: {"name":"test","color":"white","size":null,"birthDate":"2020-06-26T08:38:54.288Z"}

2. JSON.parse(json)

• JSON => Object deserialize
• String(문자형)를 Object형으로 변환

1. 기본구문

let obj = JSON.parse(json);

console.log(typeof obj);

// 결과값: object

console.log(obj);

// 결과값
// {
//   name: 'test',
//   color: 'white',
//   size: null,
//   birthDate: '2020-06-26T08:41:49.705Z'
// }

2. 주의: birthDate의 경우 Object -> JSON -> Object로 변환됨에 따라
   값이 문자열이 되버린다.

console.log(typeof obj.birthDate); //결과값: string

console.log(obj.birthDate.getDate()); //오류발생: obj.birthDate.getDate is not a function

// birthDate의 경우 Date 생성자를 이용 다시 Object로 변환시켜야 한다.  
obj = JSON.parse(json, (key,value) => {  
return key === 'birthDate' ? new Date(value) : value;  
});

console.log(typeof obj.birthDate); //결과값: object  
console.log(obj.birthDate.getDate()); //결과값: 26