'javascript stringify'에 해당되는 글 1건

json를 stringify 사용해보기 (json.stringify로 string으로 바꿔주기)



Javascript에서 Object를 주로 다루게 되는데 


Object를 String을 바꿔주어야 할 때가 이럴 때 쓰는 함수가 stringify이다.


그러나, 자주 쓰는 정확히 잘모르고 쓰는 것 같아서 정리를 하게 되었다.


아래의 문법과 그 안에 매개 변수에 대한 설명이 있다.


예제를 통해서 이 문법들을 알아보려고 한다.


출처 : https://developer.mozilla.org/ko/ 

링크



예제를 보고 이 문법 사진을 다시보시는 것을 추천드립니다!.

내가 설명하는 것보다 이 설명이 10배 마음에 들어기 때문입니다.

너무 날로 먹는 거 같아서 ...



첫번째 Object를  String으로 바꿔주기  


object  test안에 값들을  string으로 변환 후 다시 string를 object로 변화하는 과정을 확인할 수 있습니다


$("#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);
});




두번째 Object를  String으로 바꿔주는 과정 속에서 Object에 다양한 값들을 넣어보기 


object  test안에 null , Number , Object 값들을 넣어을 때, stringify를 했을 때 결과값을 확인해보면, 

undefined , Number, Object 들은 제거되고, null 남겨지고 , 숫자와 문자의 값들을 출력이 되는 것을 확인하였습니다.


$("#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);
});





세번째 Object를  stringify의 replacer와 space를 활용해보기


stringify의 replacer에 Array 형식을 매개변수로 넣어주면, Arrray 값들로만 string 변화 된다.

이 replacer 매개변수를 함수로 지정하여 수행이 가능하다.


$("#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;
}
});




결과 화면

See the Pen JSON.stringify by Nami (@NamuNami) on CodePen.




블로그 이미지

미나미나미

,