<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<title>테스트 페이지</title>
</head>
<body>
<p>JSON.stringify 사용해보기</p>
<br>
<p>object 값 = {name:"gamora" , age : 10 , class :"A" , favorite : { 1: "sleep", 2: "music"}};</p>
<button id="first_btn"> "stringify - > parse 해보기"</button>
<br>
<p>object 값 = {name: null , age : Number , class : undefined , favorite : { 1: "sleep", 2: undefined , 3: Object} ,
Object : Object}</p>
<button id="second_btn"> "stringify 다양한 값들을 테스트 해보기"</button>
<br>
<p>object 값 = { name: helo , number : 12 , job : student , hobby : music , 음식 : 짜장면};</p>
<button id="third_btn"> "stringify와 replacer 사용하기"</button>
<script>
$(function () {
$("#first_btn").click(function () {
var test = { name: "gamora", age: 10, class: "A", favorite: { 1: "sleep", 2: "music" } };
var convert_test = JSON.stringify(test); //Object를 String으로 바꾸기
alert("test의 타입은 " + typeof (test) + "입니다. 이것을 stringify을 지나면, type = " + typeof (convert_test) + "으로 변합니다.");
//test 타입은 Object , stringify를 통해서 String으로 바뀝니다.
alert(convert_test); // String 값으로 출력
var recover_test = JSON.parse(convert_test); // string 값을 parse 통해서 object로 변환
alert("stringify 으로 변환된 string type을 다시 pares 통해서 " + typeof (recover_test) + "으로 변화 했습니다");
// string 값을 object로 변화하였는지 확인
alert(recover_test);
});
$("#second_btn").click(function () {
var test = { name: null, age: Number, class: undefined, favorite: { 1: "+'sleep'+", 2: undefined, 3: Object }, Object: Object };
alert("stringify 되기전 " + "{name: null , age : Number , class : undefined , favorite : { 1: " + 'sleep' + ", 2: undefined , 3: Object} , Object : Object}");
//stringify 되기전 {name: null , age : Number , class : undefined , favorite : { 1: sleep, 2: undefined , 3: Object} , Object : Object}
var convert_test = JSON.stringify(test);
alert("stringify 된 후 " + convert_test);
//stringify 된 후 {"name":null,"favorite":{"1":"+'sleep'+"}}
var recover_test = JSON.parse(convert_test);
});
$("#third_btn").click(function () {
var test = { name: "helo", number: 12, job: "student", hobby: "music", "음식": "짜장면" };
alert("{ name: helo , number : 12 , job : student , hobby : music , 음식 : 짜장면};");
//{ name: helo , number : 12 , job : student , hobby : music , 음식 : 짜장면};
var convert_test = JSON.stringify(test, ["job", "음식"]);
alert("stringify와 replacer 사용하면 => " + convert_test);
//stringify와 replacer 사용하면 => {"job":"student","음식":"짜장면"}
convert_test = JSON.stringify(test, replacer, ' ');
alert("stringify와 replacer 함수를 사용하면 => " + convert_test);
console.log("stringify와 replacer 함수를 사용하면 => " + convert_test);
//stringify와 replacer 함수를 사용하면 => {
// "number": 1
// }
function replacer(key, value) {
console.log(typeof value)
console.log('key -> ' + key + "| value ->" + value);
// object
// key -> | value -> [object Object]
// string
// key -> name | value -> helo
// number
// key -> number | value -> 12
// string
// key -> job | value -> student
// string
// key -> hobby | value -> music
// string
// key -> 음식 | value -> 짜장면
if (typeof value === "string") {
return undefined;
}
if (typeof value === "number") {
return 1;
}
return value;
}
});
});
</script>
</body>
</html>
