JSON 정리

2016. 11. 23. 00:16ㆍProgramming/JavaScript

JSON(JavaScript Object Notation)

:객체 형식으로 자료를 간결히 표현한 것(공식 표준인 XML보다 더 가볍기 때문에 자주 쓰임)


참고 사이트: http://genesis8.tistory.com/195


<XML의 경우>


1
2
3
4
5
6
7
8
9
10
<books>
    <book>
        <num>01_a123</num>
        <name>모비딕</name>
        <sort>소설</sort>
        <price>12900</price>
        <author>쯔위</author>
        <info>흰 고래 이야기</info>
    </book>
</books>
cs


<JSON의 경우>


1
2
3
4
5
6
7
8
{
"num" : "01_a123",
"name" : "모비딕",
"sort" : "소설",
"price" : "12000",
"author" : "쯔위",
"info" : "흰 고래 이야기"
}
cs


위에서 보듯

같은 정보라도 JSON의 경우가 데이터가 가볍다.



<저장되는 형태 3가지>
 
1) 객체(object)
 
1
2
3
4
5
{
"나이": 18, 
"이름":"쯔위", 
"여자니":true
}
cs

2) 배열

대괄호([])안에 콤마로 값, 순서 구분
안에 올수 있는것은 다른배열, 객체, 기본자료형

1
[18, "트와이스", {"이름":"쯔위"}, [8514790, "오라클자바커뮤니티"]]
cs

1
2
3
4
5
{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}
cs

3) 기본자료형

숫자, 문자열, 논리형, null 네가지 타입을 지원,
단 날짜,시간, 화폐등은 지원안함


<데이터 이용법>


1) 데이터 출력

employees[0].firstName OR employees[0]["firstName"]


2) 데이터 수정

employees[0].firstName = "Gilbert";


<toString()으로 JSON 만들기>

\와 "가 인식 안 되므로 함께( \* ) 써줘야 한다. 따라서 다음과 같은 형태 이루게 된다.


1
2
3
4
5
6
7
8
9
10
11
public String toString() {
        return "{"   // \"는 따옴표를 의미
                + "\"num\":"+num+","
                + "\"id\":\""+id+"\","
                + "\"name\":\""+name+"\","
                + "\"pwd\":\""+pwd+"\","
                + "\"email\":\""+email+"\","
                + "\"phone\":\""+phone+"\","
                + "\"admin\":\""+admin+"\","
                + "\"indate\":\""+indate+"\""
                + "}";
cs



<통합 예제: JSON으로 객체 만들어 쓰기>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<body>
 
<h2>Create Object from JSON String</h2>
 
<p id="demo"></p>
 
<script>
//JSON 형태로 저장
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

//eval() 이용해 오브젝트화
var obj = eval ("(" + txt + ")");

document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
 
</body>
</html>
 
cs


<통합 예제2: JSON 파일을 AJAX 방식으로 출력>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>JSON books.js or books.txt를 화면에 출력시킨다.</h3>
<button type="button" onclick="loadDoc()">AJAX 통신</button>
<div id="test">
    <table border="3">
        <tbody class="title">
            <tr>
                <th>num</th><th>name</th><th>sort</th>
                <th>price</th><th>author</th><th>info</th>
            </tr>
        </tbody>
        <tbody class="list">
        </tbody>
    </table>
</div>
<br>
<script>
function loadDoc(){
    var http = new XMLHttpRequest();
    var url = "books.js";
    //비동기식으로 통신할 때 실행할 함수 or 로직을 onreadystatechange에 구현해야
    http.onreadystatechange = function(){
        if(http.readyState==4 && http.status==200){
            //통신이 성공적이면 실행할 메소드
            //결과 값이 text기 때문에 JSON.parse를 해줘야 한다.
            var jsonParsing = JSON.parse(this.responseText);
            bookList(jsonParsing);
        }
    }
    http.open("GET", url, true); //접속할 대상
    http.send(); //접속, 성공시 onreadystatechange에 선언된 함수가 실행
}


function bookList(books){
//querySelector는 문서 타입 상관없이 검색 가능
    var tableList = document.querySelector("#test table .list");
    var htmlList = "";
    for(var i=0;i<books.length;i++){
        htmlList+="<tr>";
        htmlList+="<td>"+books[i]["num"]+"</td>";
        htmlList+="<td>"+books[i]["name"]+"</td>";
        htmlList+="<td>"+books[i]["sort"]+"</td>";
        htmlList+="<td>"+books[i]["price"]+"</td>";
        htmlList+="<td>"+books[i]["author"]+"</td>";
        htmlList+="<td>"+books[i]["info"]+"</td>";
        htmlList+="</tr>";
    }
    tableList.innerHTML = htmlList;
}
 
</script>
</body>
</html>
//cs


'Programming > JavaScript' 카테고리의 다른 글

상속(prototype)  (0) 2016.11.27
AJAX 정리  (0) 2016.11.23
함수(Function)  (0) 2016.11.23
문자열, 배열 처리  (0) 2016.11.22
자바스크립트 소개  (0) 2016.11.22

관련글

티스토리툴바