예제 코드
JSON.stringify(), JSON.parse() 활용 예제.
(eval() 함수를 활용하는 방법도 있음. 그러나 추천하지는 않음)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
JSON.stringify()
JSON.parse()
*/
let person = {
'name' : '홍길동',
'phone' : '010-1111-2222'
}
console.log(person) // 객체
console.log(JSON.stringify(person)) // 객체 to 문자열
console.log(typeof JSON.stringify(person)) // 타입 확인
let strPerson = JSON.stringify(person) // 객체 to 문자열
let obj = JSON.parse(strPerson) // 문자열 to 객체
console.log(obj) // 로그 확인
console.log(typeof obj) // 타입 확인
</script>
</head>
<body>
</body>
</html>
활용(1)
자바 클래스 멤버변수들을 파싱해서 사용할 수 있다. function을 받아 올 필요는 없다. 값을 뿌려 주기 위해 활용하는 거니까.
또한, 공공API에서 JSON 형태를 제공한다. 즉, 자바스크립트로 활용할 수 있다.
프론트 - 백엔드 : 바이트 스트림으로 자료를 주고받기 때문에, JSON 객체 자체로 보낼 수 없고, 문자열로 주고받는다.
백엔드(서버, JAVA로 구성)에서 날라오는 JSON 형태의 문자열을 파싱(JSON.parse)해서 자바스크립트 객체로 활용할 수 있다.
반대로, 프론트(자바스크립트)에서 날라오는 JSON 형태의 문자열을 파싱해서 자바에서 활용할 수 있다.
(JAVA에서도 JSON 관련 API를 활용해서 손쉽게 파싱할 수 있다)
활용(2)
객체 내 toJSON 함수를 선언하면, stringify 할 때 해당하는 속성만 활용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
JSON.stringify()
JSON.parse()
*/
let person = {
'name' : '홍길동',
'phone' : '010-1111-2222',
'addr' : '서울시 서초구',
toJSON : function(){ // toJSON 함수를 선언하면, stringify 할 때 해당하는 속성값만 사용할 수 있다!
return {
"name" : this.name,
"addr" : this.addr
}
}
}
console.log(person) // 객체
console.log(JSON.stringify(person)) // 객체 to 문자열
console.log(typeof JSON.stringify(person)) // 타입 확인
let strPerson = JSON.stringify(person) // 객체 to 문자열
let obj = JSON.parse(strPerson) // 문자열 to 객체
console.log(obj) // 로그 확인
console.log(typeof obj) // 타입 확인
</script>
</head>
<body>
</body>
</html>
further(1)
스프링에서는 객체형태의 문자열을 자동으로 파싱해준다고 한다. 더 쉬워질 듯!
futher(2)
https://plotly.com/javascript/
Plotly JavaScript Graphing Library
A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts.
plotly.com
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] ★a태그 href 속성에 javascript 함수 넣기 (0) | 2020.07.23 |
|---|---|
| [JS] 예외처리, 사용자 정의 예외 처리 (0) | 2020.06.22 |
| [JS] DOM : form 태그 응용, 조건에 따른 submit 활용(onsubmit) (0) | 2020.06.22 |
| [JS] DOM : form 태그(document.name속성명), checkbox 버튼 전체선택, 전체취소, 결과보기 (1) | 2020.06.22 |
| [JS] DOM level 2 : 표준 이벤트 모델 (이벤트 캡쳐링, 이벤트 버블링 비교) (0) | 2020.06.22 |
