8. JSON

JSON

1. JavaScript Object Notation의 약자
2. object{key:value}로 이루어짐
3. data를 주고 받을 때 쓰는 가장 간단한 file format
4. data를 sever와 주고 받을 때 serialization을 위해 씀
5. 프로그래밍 언어, 플랫폼에 상관없이 쓰인다

1. Object to JSON

  • JSON.stringify()
const rabbit = {
  name: `tori`,
  color:`white`,
  size: null,
  birthDate: new Date(),
  // symbol: Symbol(`id`), // JS에만 존재하는 data라서 json에 serialize 되지 않는다
 // 아래의 함수 문법은 jump: function()과 같음
  jump() { // 함수는 object의 data가 아니기 때문에 serialize 되지 않는다
    console.log(`${this.name} can jump!`);
  }
};
let json = JSON.stringify(true); // 불린값
console.log(json);
json = JSON.stringify([`apple`, `banana`]); // 배열
console.log(json);
json = JSON.stringify(rabbit); // 객체
console.log(json);
json = JSON.stringify(rabbit, ['name', 'color','size']); // 원하는 key의 값만 serialize 할 수 있음
console.log(json);
json = JSON.stringify(rabbit, (key, value) => { // 콜백함수 방법
  // console.log(`key: ${key}, value: ${value}`);
  // if (key === `name` ) {
  //   return `ellie`;
  // } else {
  //   return value
  // }
  return key === `name` ? `ellie` : value;    //key에 name이 있다면 ellie라는 value 로 설정하자 
});
console.log(json);

2. JSON to Object

  • JSON.parse()
json = JSON.stringify(rabbit);
console.log(json);
let obj = JSON.parse(json);
console.log(obj);
// obj.jump(); 
// error
//함수가 serialize 될 때 jump라는 method는 포함되지 않았음
// console.log(rabbit.birthDate.getDate()); // error
//birthDate는 string이기 때문이다
const obj = JSON.parse(json, (key, value) => {
  // console.log(`key: ${key}, value: ${value}`);
  return key === `birthDate` ? new Date(value) : value;
});
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); 
// string을 API로 바꾼 후 역직렬화 해서  29로 출력 됨 


## JSON 관련 사이트

JSON Diff -서버요청시 첫번째 두번째 데이터가 다를 경우 비교 문제 디버깅시 유용
JSON Beautifier - 포멧을 에쁘게 만들어줌
JSON -TYPE울 object
JSON Validator -JSON 오류 알려줌

좋은 웹페이지 즐겨찾기