반응형
JSON은 XML과 같은 데이터 전송을 위한 포맷입니다. 과거에 XML이 데이터 전송의 표준이었다면, 현재는 JSON 데이터를 좀 더 유용하게 사용하고 있습니다. XML의 경우 XML 문서를 만들기 위해 XML 정의부터 XML 데이터를 실제 데이터 객체로 변환하는 작업을 위해 XML DOM을 사용해야 하므로 JSON 보다는 처리 비용이 비쌉니다. 그래서 요즘은 JSON을 좀 더 많이 사용하고 있습니다.
JSON은 name/value 한 쌍으로 구성된 데이터 들입니다. 각 데이터는 콤머(,)로 구분하고 있습니다.
Javascript에서 JSON 데이터는 Javascript 객체와 동일합니다. 그래서 객체와 JSON 데이터를 구분하기 위해 따옴표를 사용합니다.
Javascript 객체 표기 - 작은따옴표 (') 사용
|
1
2
3
|
{name:'value'}
|
cs |
JSON 데이터 표기 : 큰 따옴표(") 사용
|
1
2
3
|
{"name":"value"}
|
cs |
Javascript JSON 데이터 유형
- 허용 : string, number, object, array, boolean, null을 테이터 타입으로 사용할 수 있습니다.
- 불허용 : function, date, undefined (JSON 데이터에 해당 속성을 접근할 때 undefined 처리됨)
예제코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="btn_a">Print Json data</button>
<button id="btn_b">JSON.parse</button>
<button id="btn_c">JSON.stringify</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
// jQuery methods go here...
$("#btn_a").click(function(){
// JSON 데이터 전부 콘솔리 찍기
console.log("[ Print object data ]");
printJson(jsonData);
});
$("#btn_b").click(function(){
// JSON.parse() : 문자열 JSON 데이터를 JSON 객체로 변환
console.log("[ Json parse. ]");
console.log(JSON.parse(jsonString));
// JSON.parse()는 문자열말 처리 가능. 객체는 Error 발생
//console.log(JSON.parse(jsonData)); // Uncaught SyntaxError: "[object Object]" is not valid JSON
});
$("#btn_c").click(function(){
// JSON.stringify() : JSON 객체를 문자열로 변환 (서버로 전송하기 위함)
console.log("[ Json stringify. ]");
console.log(JSON.stringify(javaObject));
console.log(JSON.stringify(jsonData));
console.log(JSON.stringify(jsonString)); // JSON 문자열을 변환할 수 없음
let a = JSON.stringify(jsonString);
console.log(a.key_a); // undefined
console.log(JSON.parse(a));
});
});
// Json은 Javascript 객체와 동일합니다. 구분하기 위해 따옴표로 구분할 뿐입니다.
let javaObject = {
key_a: 'value_a',
key_b: 'value_b',
key_c: 'value_c',
key_d: function() { return 10; } // function은 json으로 전환된데 제외 됩니다. function 값을 사용하기 위해서는 재 할당이 필요
};
let jsonData = {
"key_a": "value_a",
"key_b": "value_b",
"key_c": "value_c",
};
let jsonString = '{"key_a":"value_a", "key_b":"value_b", "key_c":"value_c"}';
function printJson(jsonData)
{
for(const x in jsonData){
console.log(x + " : " + jsonData[x]);
}
}
</script>
</html>
|
cs |
결과
JSON.parse()
문자열 JSON 데이터를 JSON 객체로 변환
JSON.stringify()
JSON 객체를 문자열로 변환 (서버로 전송하기 위함)
반응형
'IT > WEB' 카테고리의 다른 글
| JQuery DateTimePicker (xdsoft 1.3.6) (0) | 2023.01.15 |
|---|---|
| JQuery Select 처리 (0) | 2023.01.14 |
| Javascript 객체 (0) | 2023.01.13 |
댓글