자바스크립트 ajax요청 후 JSON객체 사용하기

자바스크립트에서 ajax요청 후 response로 들어있는 JSON객체를 사용한다.

이 response로 넘어온 JSON객체는,

key값이 없을 수도 있고(최종 프로퍼티는 key값이 반드시 있어야 한다)

있을수도 있다. 이에 따라서 자바스크립트에서도 사용하는 방법이 다르다.

1. 전부 key값이 존재하는 경우

전부 key값이 존재한다는 것은 아래와 같이 json객체가 트리형태로 여러 깊이로 이루어져 있을 때 사용한다.

다음은 jsp파일에서 ajax로 요청 후 응답을 받고, 날아온 response가 JSON객체일 때 이를 자바스크립트에서 사용하는 코드이다.

$.ajax({
        type : 'GET', // GET메서드
        url : '/rest/reply/' + ${boardVO.boardno}, // Request URL
        dataType : 'json',
        success : function(replies) {
            /* replies 의 내용
            {
                "secretReplyCount":1,
                "replies":[
                    {
                        "boardno":99,
                        "content":"asdasd",
                        "parentno":0,
                        "replydate":{...},
                        "replyno":36,
                        "username":"aaa"
                    }
                ]
            }
            */
            alert('replies.secretReplyCount : ' + replies.secretReplyCount); // 1
            alert('replies.replies[0].boardno : ' + replies.replies[0].boardno); // 99
                
            }
        },
        error : function() { // 실패시
            alert("reply load Failed!");
        }
    });

 

type, url은 크게 중요하지 않으므로 넘어간다.

 

ajax()함수의 dataType 옵션을 'json'으로 주고

success옵션에 함수의 인자를 replies로 했을 경우이다.

(response로 해도 되고 사용자가 마음대로 정의 가능)

그냥 객체.키값 과 같은 형태로 쓰면 된다.

JSON 객체(== replies, == response)는 위와 같이 돼있으며 replies는 여러개가 들어있을 수 있으므로 배열형태로 구현.

secretReplyCount의 경우는 JSON객체에서 깊이가 1인 프로퍼티의 키값므로

alert(replies.secretReplyCount);  와같은 형식으로 뽑아서 쓰면 된다. 1 이라는 글자가 출력된다.

 

JSON 객체 안의 배열의 경우는 replies.replies[i].boardno  와 같이 쓰면 JSON객체(replies)의 replies 프로퍼티 중 i번째의 boardno를 구하겠다는 코드이다.

참고로 자바스크립트에서 배열의 인덱스는 0부터 시작하므로

alert(replies.replies[0].boardno);  을 실행하면 99라는 값이 뜬다.

 

만약, 서버단에서 RESTful API를 구현하여 Key값이 없는 List를 사용하여 [{...},{...}]와 같이 배열과 같은 형태로 오거나

객체 하나만을 리턴하며 {...} 와 같은 방식으로 왔다면 다음과 같이 사용하면 된다.

아래 2가지 경우는 바로 최종 프로퍼티를 사용하는 경우이다.

2. List를 써서 [{...},{...}]와 같이 온 경우

$.ajax({
        type : 'GET', // GET방식으로 요청
        url : '/rest/reply/' + ${boardVO.boardno}, // Request보낼 URL
        dataType : 'json',
        success : function(response) {
            /*response의 내용
               [{"name":"de facto","id":1}, {"name":"CSGO","id":2}]
            */
            for(var i in response){
                alert('response['+i+'].name : ' + response[i].name);
                alert('response['+i+'].id : ' + response[i].id);
            }
 
        },
        error : function() { // 실패시
            alert("reply load Failed!");
        }
    });

 

처음부터 배열로 시작하기 때문에 response[0].property과 같은 방식으로 바로 사용한다.

 

 

 

 

 

3. 객체 하나만을 리턴하여 {...}와 같이 온 경우

$.ajax({
        type : 'GET', // GET방식으로 요청
        url : '/rest/reply/' + ${boardVO.boardno}, // Request보낼 URL
        dataType : 'json',
        success : function(response) {
            /*response의 내용
               {"name":"de facto","id":1}
            */
 
            alert('response.id : ' + response.id);
            alert('response.name : ' + response.name);
 
        },
        error : function() { // 실패시
            alert("reply load Failed!");
        }
    });

 

만약 List를 사용하지 않고 객체 하나로넘어왔다면 위와 같이 바로 response.property 와 같이 사용한다.

 

 

참고로, 객체를 바로 JSON포맷으로 변경하여 response를 날리게 하는 Spring 라이브러리는 'jackson-databind'이다.

관련된 내용은 Spring과 관련있으므로 따로 공부하기 바란다.