'JSON | AJAX | 그 외 기술' 카테고리의 글 목록 :: 게을러지고 싶어 부지런한 개발자

JSON | AJAX | 그 외 기술

JSON.stringify(), JSON.parse(), toJSON() 비교 2020.08.28
JSON으로 날짜 받을 때 이상하게 불러와지는 경우 2019.11.21

JSON.stringify(), JSON.parse(), toJSON() 비교

2020. 8. 28. 15:01

1. JSON.stringify() 메소드

인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환

<html>
<head>
<title>stringify</title>
</head>

<body>
<p id="json"></p>

<script>
var dog = {name: "식빵", family: "웰시코기", age: 1, weight: 2.14}; // 자바스크립트 객체

var data = JSON.stringify(dog); // 자바스크립트 객체를 문자열로 변환함.
document.getElementById("json").innerHTML = data;
</script>
</body>

</html>

=============================================================
결과|

{"name":"식빵","family":"웰시코기","age":1,"weight":2.14}

2. JSON.parse() 메소드

JSON.stringify() 메소드와는 반대로 인수로 전달받은 JSON 형식의 문자열을 자바스크립트 객체로 변환하여 반환

<html>
<head>
<title>parse</title>
</head>

<body>
<p id="json"></p>

<script>
// JSON 형식의 문자열
var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}';

var data = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함.
document.getElementById("json").innerHTML = dog + "<br>";
document.getElementById("json").innerHTML += dog.name + "," + dog.family;
</script>
</body>

</html>

=============================================================
결과 |

[object Object]
식빵, 웰시코기

3. toJSON() 메소드

자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환

(따라서 이 메소드는 Date.prototype 객체에서만 사용할 수 있음)

<html>
<head>
<title>toJSON</title>
</head>

<body>
<p id="json"></p>

<script>
var date = new Date(); // 자바스크립트 Date 객체
var str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환함

document.getElementById("json").innerHTML = date + "<br>";
document.getElementById("json").innerHTML += str;
</script>
</body>
</html>
=============================================================
결과 |

Fri Aug 28 2020 14:56:07 GMT+0900 (대한민국 표준시)
2020-08-28T05:56:07.578Z