[JSON] JS - JSON - JSON.stringify() 함수 ★ - (JS객체 → JSON문자열) 변환. ※ PHP var_dump(), print_r() 유사 역할 가능 ※ 객체 (내용/요소/키값쌍) 줄바꿈 출력/확인

목차

1. JSON.stringify() 정의 - (JS객체 → JSON문자열) 변환
2. JSON.stringify() 예제 - JS객체를 문자열로 만들기
3. JSON.stringify() 예제 - JS배열을 문자열로 만들기
4. JSON.stringify() 예외1 - 날짜를 문자열로 만들기
5. JSON.stringify() 예외2 - 함수를 문자열로 만들기
6. JSON.stringify() 예제 - 객체의 (타입/내용) 확인

JSON.stringify() 정의 - (JS객체 → JSON문자열) 변환

JS 객체를 문자열 (즉, JSON 형태)로 변환

 

---

1.

• JSON은 웹 서버와 데이터 교환하는 데 주로 사용.
• 데이터를 웹 서버로 보낼 때 문자열 형태이어야 함.
• JSON.stringify()로 JS 객체를 문자열 (즉, JSON 객체)로 변환 함.

 

2.

IE8이상 주요 최신 브라우저 모두 지원.

 

JSON.stringify() 예제 - JS객체를 문자열로 만들기

 

<p id="homzzang"></p>

<script>

var obj = { site: "홈짱닷컴", open: 2012, domain: "Homzzang.com" }; // obj 변수 = JS 객체 상태

var hzJSON = JSON.stringify(obj); // hzJSON 변수 = 문자열 상태 (= JSON 객체 상태)

document.getElementById("homzzang").innerHTML = hzJSON;

</script>

결과보기

JSON.stringify() 예제 - JS배열을 문자열로 만들기

 

<p id="homzzang"></p>

<script>

var arr = [ "홈짱닷컴", "2012", "Homzzang.com"]; // arr 변수 = JS 배열 상태

var hzJSON = JSON.stringify(arr); // hzJSON 변수 = 문자열 상태

document.getElementById("homzzang").innerHTML = hzJSON;

</script>

결과보기

예외 (2개)

JSON.stringify() 예외1 - 날짜를 문자열로 만들기

 

JSON에서는 날짜 객체 허용 않음. 

JSON.stringify () 함수는 모든 날짜를 문자열로 변환.

※ 문자열을 수신기에서 날짜 객체로 다시 변환 가능.

 

<p id="homzzang"></p>

<script>

var obj = { site: "홈짱닷컴", today: new Date(), domain: "Homzzang.com" };

var hzJSON = JSON.stringify(obj);

document.getElementById("homzzang").innerHTML = hzJSON;

</script>

결과보기

JSON.stringify() 예외2 - 함수를 문자열로 만들기

 

JSON에서는 함수가 객체 값으로 허용 않음.

JSON.stringify() 함수는 키와 값 모두 JavaScript 객체에서 모든 함수를 제거. (즉, 핑크색부분제거)

 

<p id="homzzang"></p>

<script>

var obj = { site: "홈짱닷컴", open: function () {return 2012;}, domain: "Homzzang.com" };

var hzJSON = JSON.stringify(obj);

document.getElementById("homzzang").innerHTML = hzJSON;

</script>

결과보기

---

단, 

JSON.stringify() 함수 실행 전 JS 객체 안의 함수를 문자열로 변환하면 함수 출력 가능.

 

<p id="homzzang"></p>

<script>

var obj = { site: "홈짱닷컴", open: function () {return 2012;}, domain: "Homzzang.com" };

obj.open = obj.open.toString();

var hzJSON = JSON.stringify(obj);

document.getElementById("homzzang").innerHTML = hzJSON;

</script>

결과보기

---

[명심할 사항 !!]

 

1.

JSON에서는 되도록 함수 사용 자제. 

왜냐면, 함수가 적용 범위 잃기 때문.

2.
문자열을 다시 함수로 다시 변환하려면 eval () 함수 사용.

 

JSON.stringify() 예제 - 객체의 (타입/내용) 확인

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

var hz = { site: "홈짱닷컴", open: 2012, domain: "Homzzang.com" };

// 방법1 - 웹에 객체 타입 출력

document.write(hz);

// 결과값: [object HTMLDocument]

// 방법2 - 웹에 객체 '키/값' 출력

const json = JSON.stringify(hz); // 객체 -> JSON 문자열로 변환

document.write(json); // JSON 문자열 출력

// 결과값: {"site":"홈짱닷컴","open":2012,"domain":"Homzzang.com"}

// 방법3 - 콘솔에 객체 '키/값' 줄바꿈 출력 (※ 구조 파악 용이)

$.each( hz, function( key, value ){ 

    console.log( 'key:' + key + ' / ' + 'value:' + value ); 

});

// 개발자도구 (F12키 > Console탭)에서 확인 가능

</script>