[JavaScript] JSON.stringify(), JSON.parse()

JSON.stringify()는 object를 JSON string으로 변환시켜주는 함수이다.

JSON.parse()는 JSON string을 object로 변환시켜주는 함수이다.

 

보통 JSON.stringify()는 fetch()나 ajax로 object데이터를 전달할 때 변환시켜줄 때 많이 사용되며

JSON.parse()는 response로 받은 string화 된 json데이터를 object로 다시 변환시켜 사용할 때 많이 쓴다.

 

간단한 예제를 들어 두 함수를 사용해 보았다.

x:5 , y:6의 데이터를 담은 object가 있다고 가정해보자.

이 object를 JSON.stringify(obj)를 거쳐 JSON string화 하게 되면

그림과 같이 {"x":5, "y":6}인 string이 생성된다.

json type으로 변환된 데이터는 ajax나 fetch를 통해 서버로 전송하여 작업할 수 있다.

 

반대로 서버로 부터 받은 json type의 string은

JSON.parse()를 통해 원래형태는 object로 되돌릴 수 있다.

위의 그림처럼, JSON.parse(stringifyJson)을 실행하게 되면

obj는 {x : 5, y : 6}을 담고있는 object가 되었음을 확인할 수 있다.

 

++ 추가

data를 담은 paramData라는 Object를

JSON.stringify(paramData)하여 ajax를 통해 보내면

@RequestBody Map<String, Object> param 형식으로 받아서 출력을 해보면

위와같이 {id = "test", ctnt = "ctnt"} 형식으로 받아볼 수 있고, 

Object안의 데이터는 param.get(key)로 꺼내쓸 수 있다.

 

받아본 데이터를 확인하기 위해 아무런 조작없이 다시 화면단으로 되돌려 보면

 

보낼때 담은 형태 그대로 담겨서 Object타입으로 다시 되돌아 왔음을 확인할 수 있었다.

만약 JSON화 해서 화면단으로 넘겼었다면 string 타입으로 도착했을 것이고,

이 경우에는 JSON.parse()를 통해 object화 해서 사용하면 될 것으로 보인다.