JSON : 데이터 불러오기 / 데이터 처리하기

json 구조

 

 

* responseText;

- responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환

 

 

- Json도 xml에서 파생되었기 때문에 xml 클래스를 사용하여 객체를 만든다.

- onreadystatechange 상태가 4(=200)일 때 함수를 실행하는데,

  함수의 파라미터로 json 데이터를 넘겨주고 싶을때 responseText 프로퍼티를 사용한다.

 

 

 

//JSON 파일을 서버로 전송하고 받아오기

<script>
	
    // JSON << XML
    // xml에서 나온 것이 JSon이기 때문에 XML 객체를 사용함
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if( xmlhttp.readyState == 4 && xmlhttp.status == 200){
            
            // xml(json) 파일 불러와서 처리할 함수들
            // json함수로 보내줄 때, 문자열로 변환된 데이터를 보내준다
            jsonFunc( xmlhttp.responseText);
            
        }
    }
    xmlhttp.open("GET", "jsondata.json", true);
    xmlhttp.send();
    
</script>

 

 

 

* JSON.parse( jsonData );

- respondText로 넘어간 json형식의 문자열 데이터는 배열 형식으로 넘어옴

 

 

* key - value :

- json은 key와 value가 짝을 이루는 형태이다.

- 변수명 [인덱스][key] = value 

- for-each문으로 key값이 같은 데이터를 배열의 형태로 가져올 수 있다.

 

 

 

<script>
// json 데이터를 불러와 클라이언트 뷰에 출력하는 함수
function jsonFunc( resp ) {
    
    // 2차원 배열 넘어온다고 생각하면 됨
    var arr = JSON.parse( resp );   
    
    // 일반문자를 json으로 만들어 줌 (parsing)
    var txt = "";
    
    alert(arr.length);	// 길이 확인용
    

    // key:value를 취득
    for( i=0; i<arr.length; i++){
        for(key in arr[i]){		// 한 묶음의 데이터 (key로 묶여짐)를 출력
            txt += key + ":" + arr[i][key] + " ";
        }
        txt += "<br>";
    }

    document.getElementById("demo").innerHTML = txt;

}

</script>