JSON 활용방법

Object를 JSON으로 변환하는 방법과 

JSON을 오브젝트로 변환하는 방법을 알아보자

 

먼저 Object를 JSON으로 변환하는 법을 보자 

JSON이라는 오브젝트를 이용하면 편리한데 .을 누르면 총 2가지의 API가 있는데 JSON을 Objec로 stringify가 있고

JSON으로 변환된 것을 parsing해서 object로 만드니까 parse를 쓰면 object로 만들 수 있겠다 하고 유추할 수 있다.

먼저 간단한 데이터타입부터 JSON타입으로 만들어 볼건데(stringify(obj))

stringify()를 이용해서 오브젝트를 JSON으로 변환해보자. Boolean타입의 primitive 타입도 json으로 변환이 가능한데

콘솔을 찍어보면 true로 나오는 것을 볼 수 있다.

JSON라는 인터페이스 안에는 총 2가지의 API가 있는데 parse와 stringify라는 것이 있는데 동일한 이름의 함수가 2개가 있고 전달된는 매개변수가 약간 차이가 있다. 이런것들을 오버로딩이라고 한다.

함수의 이름은 동일하지만 어떤 파라미터를 전달하냐 몇개의 파라미터를 전달하냐에 따라서 각각 다른방식으로 호출이 가능한 것을 말한다.

그래서 결국은 총 2개의 API가 있는데 parse는 json의 string데이터를 넣으면 어떤 타입의 오브젝트로 변경이되고 전달해도 되고 안해도 되는 optional타입의 콜백함수 reviver라는 것이 있는데 콜백함수인데 결과값을 변형한다라고 한다.

 

그래서 string을 object로 변환할 때 object가 만들어지는 과정을 조금 더 세밀하게 조정하고 reviver함수를 이용하면 된다.

stringify 어떤 타입의 오브젝트를 받아와서 string으로 변환해주는데 string으로 만들 때 조금 더 세밀하게 통제하고 싶으면 콜백함수를 전달하면 좀 더 통제하면서 string으로 만들 수 있다.

배열을 json으로 변환해보면 double quote로 들어가게 되는 것을 볼 수 있다. 이것이 json의 규격사항이다.

이제 object를 json으로 변환해보면 rabbit라는 object를 만들고 해보자

토끼 오브젝트를 json으로 변환하게 되면 아래 콘솔창과 같이 나온다. date는 string으로 변환되어서 json으로 만들어진다. jump라는 함수는 json에 포함되지 않는데 함수는 오브젝트에 있는 데이터가 아니기 때문에 제외된다.

또 js에 있는 특별한 데이터도 json에 포함되지 않는다.(symbol 같은거)

 

json으로 변환되는 것을 통제하고 싶으면 콜백함수를 이용하면 되는데 ,를 하게되면 replacer라는 것이 있다.

함수형태로 전달해도 되고 배열형태로 전달해도 된다.

토끼 오브젝트에서 원하는 프로퍼티를 넣어서 작성하게 되면 해당하는 프로퍼티만 json으로 변환된다.

아니면 콜백함수를 이용하면 key와 value를 전달받는 콜백함수를 전달하면 key와 value에 따라서 다양한 것을 할 수 있다. key가 name이라는 것이 들어오게 되면 jay가 나오게 하고 아닌경우에는 원래 value를 나타내라고 하면 이름에 jay로 변환된다.

그래서 조금 더 세밀하게 통제하고 싶을 때 콜백함수를 이용해서 쓸 수 있다.

 

json을 object로 변환하는 parse에 대해서 알아보면 아까전에 json을 stringify를 이용해서 rabbit 오브젝트를 json으로 변환했었다. 이제는 반대로 json으로부터 오브젝트를 만들건데 JSON에 있는 parse라는 API를 이용해서 변환하고 싶은 JSON을 전달해주기만 하면 된다.

 

여기서 rabbit은 jump라는 함수가 있었고

변환한 오브젝트는 serialize가 된 json으로 부터 다시 오브젝트를 만들었기 때문에 함수는 serialize될 때 포함되어있지 않았다. 그래서 obj.jump()라고 찍으면 에러가 발생한다.

 

즉 토끼라는 오브젝트를 json으로 변환할 때 함수가 전혀 포함되어있지 않다. 데이터들만 json으로 갔다가 json을 다른

오브젝트로 변환해서 jump라는 메소드는 포함되어있지 않다.

 

또 여기서 토끼에는 birthDate라는 오브젝트가 있었고 이것은 date라는 오브젝트이다. getDate라는 date안에 존재하는 API를 쓸 수가 있는데 출력하게 되면 아래와 같이 3라고 숫자가 나온다.

 

반대로 JSON으로부터 만든 오브젝트의 birthDate를 출력하면 에러가 발생한다.

그래서 parse에 reviver라는 콜백함수를 전달하면 key와 value에 파라미터를 받아서 key가 birthDate면 새로운 오브젝트를 만들고 아니면 원래있던 value를 쓰자고 하면 똑같이 3이라는 숫자가 나온다.

배운 것을 정리하면 json에는 stringfy와 parse가 있다. 각각 콜백함수를 전달해서 좀 더 세밀하게 어떤것을 통제할 수가 있다.

 

참고: https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10 

http://www.jsondiff.com/

 

https://jsonformatter.org/

Best JSON Formatter and JSON Validator: Online JSON Formatter

http://json.parser.online.fr/

Json Parser Online

https://jsonformatter.curiousconcept.com/

JSON Formatter & Validator