안녕하세요. 명월입니다.
이 글은 자바스크립트에서 Json을 다루는 stringify함수에 대해 소개하겠습니다
최근에 프로젝트를 하다 보면 Json이란 단어를 참 많이 접하게 되는 것 같습니다. 한 5~6년 전만 해도 Json의 비중보다는 XML의 비중이 컷는데 말입니다. 개인적인 생각인데 웹 문서가 XML이다 보니 정보교환의 구분 점을 위해 JSON을 많이 사용하게 되는 것 같네요.
Json의 구조는 XML과 비슷합니다만 다른 점은 XML은 각 요소의 속성을 부여할 수 있는데 JSON은 속성은 없고 오로지 값에 대한 구조로만 이루어져 있습니다.
즉, 포괄적인 정보 교환으로는 아직도 XML을 사용하는 데, 값의 대한 정보만 주고 받는 데이타면 JSON을 더 많이 사용합니다.
그럼 Json의 구조에 대해서 공부하면 중괄호로 시작과 끝을 맺고 키 : 값의 형태 구조로 되어 있습니다. 그리고 배열(Array)의 경우는 대괄호로 구분되어 집니다.
예) {"키1":"데이터","키2":["리스트1","리스트2"],"키3":{"맵키1":"맵1","맵키2":"맵2"}}
Json은 구분자가 괄호, 콜론밖에 없기 때문에 그냥 보면 엄청나게 복잡할 것 같지만, 막상 하나하나 뜯어보면 단순한 구조로 되어있습니다.
Json를 만들기 쉽게 자바스크립트의 내장 함수인 stringify함수를 이용해서 Json 데이터를 만들겠습니다.
예제를 작성하기 전에 stringify함수에 대해서 소개하면 stringify함수는 자바스크립트 언어 환경에서의 Json형식의 object를 함수의 파라미터에 넣으면 String 구조의 값으로 반환되는 함수입니다.
<!doctype html>
<html lang="kr">
<head>
<script>
//Object 생성
var JsonExam = {
result1 : "test",
result2 : "test2",
result3 : "test3"
}
window.onload = function(){
//클래스 값을 출력
document.getElementById("result1").innerHTML = JsonExam.result1;
document.getElementById("result2").innerHTML = JsonExam.result2;
document.getElementById("result3").innerHTML = JsonExam.result3;
//Json변환
data = JSON.stringify(JsonExam);
//Json값을 출력
document.getElementById("result").innerHTML = data;
}
</script>
<style>
span{
display:block;
}
</style>
</head>
<body>
<span id="result1"></span>
<span id="result2"></span>
<span id="result3"></span>
<output id="result"></output>
</body>
</html>
먼저 JsonExam이라는 Object를 만들었습니다. 변수는 result1, result2, result3 으로 생성했습니다. 이 클래스를 JSON.stringify 함수에 넣으면 예상되는 결과는 {"result1":"test","result2":"test2","result3":"test3"} 가 나옵니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Jquery] ajax에서 동기화 작업하는 방법 (0) | 2019.07.15 |
|---|---|
| [Jquery] ajax를 이용해 파일 업로드하는 방법 (2) | 2019.06.16 |
| [Jquery] Jquery 초기 구조 설정하기 (0) | 2019.05.18 |
| [Javascript] JSON.parse 함수 (0) | 2015.04.20 |
| [Javascript] 소스 보기 라이브러리 - Syntaxhighlighter (0) | 2013.03.12 |
| [Jquery] 스크롤링 효과 예제 (0) | 2012.10.06 |
| [Jquery] 롤링 라이브러리 - jcarousellite (0) | 2012.09.24 |
| [Jquery] Html에서 나타내는 Treeview (0) | 2012.09.22 |