[Javascript] JSON.parse(), JSON.stringify() 사용 방법

 

 

Back-End를 개발하다보면, JSON을 이용해서 웹 서버와 데이터를 자주 주고 받습니다. 

보통 Front-End 영역에서 Javascript를 이용해서 ajax로 Web API를 호출 하곤 하는데요. 이때 데이터 포멧을 JSON을 이용합니다.

그러다 보면, 빈번히 Javascript 객체를 String 으로 변경하였다가, 다시 객체로 변환하는 경우가 발생하는데요.

이를 쉽게 해주는 메소드입니다. 

 

---

JSON.stringify()

JSON 의 일반적인 용도는 웹 서버와 데이터를 주고 받는 것 입니다. 웹 서버로 데이터를 보낼 때 데이터는 문자열이여야 하며, JSON.stringify()를 사용해서 Javascript 객체를 문자열로 변환 할 수 있습니다.

 

var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;



//결과값
{"name":"John","age":30,"city":"New York"}

 

 

JSON에서는 날짜 객체가 허용되지 않습니다. JSON.stringify () 함수는 모든 날짜를 문자열로 변환합니다.

 

var obj = { name: "John", today: new Date(), city : "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;


//결과값
{"name":"John","today":"2020-01-10T13:29:19.764Z","city":"New York"}

 

 

---

 

JSON.parse()

JSON 의 일반적인 용도는 웹 서버와 데이터를 주고 받는 것 입니다. 웹 서버로 데이터를 보낼 때 데이터는 문자열이여야 하며, JSON.parse()로 데이터를 구문 분석하며, 데이터가 Javascript 객체로 변환됩니다.

 

var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;



//결과값
John, 30

 

AJAX 요청을 사용하여 서버에서 JSON을 요청할 수 있습니다. 서버의 응답이 JSON 형식으로 작성되는 한 문자열을 JavaScript 객체로 구문 분석 할 수 있습니다.

 

 

---

 

 

https://www.w3schools.com/js/js_json_stringify.asp