• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
JSON JS - JSON - Introduction (소개)
JSON JS - JSON - Syntax (구문) ★
JSON JS - JSON - JSON vs XML (언어비교)
JSON JS - JSON - Data Types (데이터타입)
JSON JS - JSON - Object (객체)
JSON JS - JSON - Array (배열)
JSON JS - JSON - JSON.parse() 함수 ★ - (JSON문자열 → JS객체) 변환. (= 웹서버와…
JSON JS - JSON - JSON.stringify() 함수 ★ - (JS객체 → JSON문자열) 변환. ※ P…
JSON JS - JSON - PHP (= 서버연동 = DB연동)
JSON JS - JSON - HTML (= 테이블 및 드롭다운 형태로 출력 + 출력개수선택)
JSON JS - JSON - JSONP (= script 이용한 서버연동)
목록
찾아주셔서 감사합니다. Since 2012