[웹프로그래밍응용] JSON

JSON

• JavaScript Object Notation의 약자

• 장점
  • 가벼운 데이터 형태
    필요한 XML데이터가 브라우저로 전송될 때 XML 대체 포맷
  • 다루기 쉬움
    { key : value } 형태
• 표현 형식
  • { key : value } 가 하나의 멤버
  • string, number(int, float), bool, array, 객체 가능
  • 배열 안에 객체나 배열 중첩 가능
    (ex. “book” = [“오편”, “해달”, [“20”, “10”], { “author” : “J.K” } ])
  • 객체는 중괄호 (ex. “book” = { “title” : “웹응”, “author” : “sb” })
• JSON 처리함수

  JSON.stringify() : javascript ➡️ json
  JSON.parse() : json ➡️ javascript

XML, JSON, CSV 비교

• XML

    <library>
        <book>
            <title></title>
            <author></author>
        </book>
        <book>
            <title></title>
            <author></author>
        </book>
        <!-- ... -->
    </library>
  

• JSON

    "book" : [ { "title":"01", "author":"011" },
               { "title":"02", "author":"022" } ]
  

  xml에서는 반복되는 요소를 생략할 수 있다
  key에 해당하는 것은 무조건 ""를 붙여야한다

• CSV(Comma Separate Values)

    "book","title","01","author","011","title","02","author","022" 
  

• Javascript

    var book = [
        { "title":"01", "author":"011" },
        { "title":"02", "author":"022" }
    ]
  

  JSON과 달리 key에 ""를 붙이지 않아도 된다

코드 예제

Javascript를 바로 JSON으로 활용

<script>
    var person = [
        { "name":"영심이", "age":22, "birth":"9/26" },
        { "name":"하니", "age":15, "birth":"8/5" },
        { "name":"미애", "age":20, "birth":"1/23" }
    ]

    function Exer1(arr){
        var data = JSON.stringify(arr);
        document.getElementById("area").innerText = data;
    }
</script>

<input type="button" value="from JS to JSON" onClick="Exer1(person)" />
<div id="area"></div>

문자열을 바로 JSON으로 활용

<script>
    var person2 = 
    '[{ "name":"영심이", "age":22, "birth":"9/26" },' + 
    '{ "name":"하니", "age":15, "birth":"8/5" },'+
    '{ "name":"미애", "age":20, "birth":"1/23" }]'

    function Exer2(arr){
        var data = JSON.parse(arr);         // 문자열 -> Js
        data = JSON.stringify(data);        // Js -> JSON
        document.getElementById("area").innerText = data;
    }
</script>

<input type="button" value="from String to JSON" onClick="Exer2(person2)" />
<div id="area"></div>

JSON을 HTML로 출력

<script>
    var person3 = 
    '[{ "name":"영심이", "age":22, "birth":"9/26" },' + 
    '{ "name":"하니", "age":15, "birth":"8/5" },'+
    '{ "name":"미애", "age":20, "birth":"1/23" }]'

    function Exer3(arr){
        var data = JSON.parse(arr);         // 문자열 -> Js
        var display;
        
        for(i = 0; i < data.length; i++){
            display += "<ul><li>name : " + data[i].name + "</li><li>age : " + data[i].age + "</li></ul>";
        }

        document.getElementById("area").innerHTML = display;
    }
</script>

<input type="button" value="from JSON to HTML" onClick="Exer3(person3)" />
<div id="area"></div>

서버에서 JSON 파일 로드

• XHR.js

        function newXHR(){
            var req;
            if(window.XMLHttpRequest){
                try{
                    req = new XMLHttpRequest();
                }catch(e){
                    req = null;
                }
            }
  
            if(!req){
                alert("지원되지 않는 브라우저 입니다");
            }
  
            return req;
        }
  
        function loadDocXHR(fname, callBack){
            var httpReq = newXHR();
              
            httpReq.onreadystatechange = function(){
                if(httpReq.readyState == 4){
                    if(httpReq.status == 200){
                        callBack(httpReq);
                    }
                    else{
                        document.write(httpReq.responseText);
                    }
                }
            }
  
            httpReq.open("GET", fname, false);
            httpReq.send(null);
        }
  

<script language="javascript" type="text/javascript" src="XHR.js"></script>
<script>
    function Exer4(fname){
        var Task = function(req){
            var data = JSON.parse(req.responseText);
            document.getElementById("area").innerText = data;
        }

        loadDocXHR(fname, Task);
    }
</script>

<input type="button" value="from JSON to Server" onClick="Exer4('text.txt')" />
<div id="area"></div>