[JS]07-JSON(stringify, parse)

JSON - JavaScrips Object Notation

자바스크립트 객체표기법 (단순 데이터 표기방법이다.)

 

---

1. Object to JSON (오브젝트를 제이슨으로 변환하는 방법)

 

JSON.stringify(obj)

 

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

    //아래와 같은 심볼이나 함수등 자바스크립트에만 있는 데이터들은 포함되지 않는다.
    symbol: Symbol('id'),
    jump:() => {
        console.log(`${name} can jump!`);
    },
};

json = JSON.stringify(rabbit);
console.log(json);

//원하는 목록 생성가능 
json = JSON.stringify(rabbit, ['name','color','size']);

//세밀하게 통제하고 싶을때 콜백함수 생성가능 
json =JSON.stringify(rabbit, (key, value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? '토끼' : value;
});
console.log(json)

---

2. JSON to Object (제이슨을 오브젝트로 가져오기)

 

JSON.parse(json)

 

json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value) =>{
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
//obj.jump(); //error! obj to json 할떄 함수는 저장되지 않았기 때문에 다시 obj로 불러올때 함수가 빠진것을 볼수있다.

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); //(콜백함수로 birthDate 가져오면 실행 가능!)

---

유용한 사이트

 

JSON Diff : 첫번쨰로 받아온 데이터와 두번째로 받아온 데이터를 비교할때 유용  http://www.jsondiff.com/

JSON Beautifier: 포맷이 망가진 코드들을 다시 예쁘게 만들어줌 https://codebeautify.org/jsonviewer

JSON Parer: json의 오브젝트를 보기 쉽게 만들어줌 http://json.parser.online.fr/

JSON Validator : 오류를 찾아줌 https://jsonformatter.curiousconcept.com/

 

---

이 글은 유튜브 드림코딩 by 엘리님의 JS 입문강의를 보면서 정리한것 입니다.