코드 조각-Android, Java, Spring, JavaScript, C#, C, C++, PHP, HTML, CSS, Delphi

요즘은 RESTful한 웹 서비스가 대세를 이루다보니 서버로부터 받는 데이터가 JSON 형태의 데이터가 많다. 즉 서버가 제공하는 API를 통해 데이터를 JSON 형태로 수신하는 경우가 많아졌다. 좀 달리말하면 서버의 특정 URI에로 URL을 던져서 해당 데이터를 JSON으로 수신해야 할 경우 이를 위해 jQuery에서 제공하는 함수인 getJSON() 함수의 용법에 대해서 살펴보고자 한다.

우선 getJSON()의 Syntax를 보면 다음과 같다(https://api.jquery.com/jquery.getjson/ 참조)

getJSON( url [, data ] [, success ] )

이 함수가 하는 기능은 HTTP의 GET method를 통해서 서버의 특정 URI가 던져주는 결과를 JSON 형태로 받아오는 역할을 한다.

(Load JSON-encoded data from the server using a GET HTTP request.)

파라미터는

 -. url : 필수항목으로, 요청이(http request) 보내질 URL이다. 데이터 타입은 String.

 -. data : option으로 key-value쌍으로 구성된 서버로 전송될 데이터.

 -. success : optional으로 서버로부터 JSON 데이터 수신이 완료되었을 때 실행하게 될 function이다. 이 function의 파라미터로 서버가 전송한 JSON 데이터가 담기게 된다.

예제코드를 보자.

아래 코드에서 /replies/all/100의 url을 서버로 던지면 서버에서 결과 값을 JSON 데이터 형태로 반환해 주면 그 결과 데이터(JSON 데이터)가 아래의 function(mData)의 mData에 저장이 된다.

$.getJSON("/replies/all/100", function(mData){

console.log("데이터 길이: ", mData.length);

console.log("데이터 mData[0].replytext: ", mData[0].replytext); 

//아래에서 다음과 같은 로그 출력이 된다.

//getPageList() mData : [object Object]

console.log("getPageList() mData : " + mData);

//아래에서 다음과 같은 로그 출력됨

//getPageList() mData.list : [object Object],[object Object],[object Object],[object Object]...

console.log("getPageList() mData.list : " + mData.list);

//JSON 데이터를 String 형태로 출력할때 JSON.stringify()를 활용하면 편리하다.

//JSON.stringify()에 의해서 JavaScript Object가 String으로 변환되어 myJSON에 저장이된다.

var myJSON = JSON.stringify(mData);

console.log("myJSON : "+myJSON);

});

위의 마지막 코드에서 JSON 포맷의 데이터가 줄이줄줄이 출력이 될 것이다.

[{"rno":17,"bno":100,"replytext":"연습중... ","replyer":"eeeeeee","regdate":1533170966000,"updatedate":1533190576000},{"rno":14,"bno":100,"replytext":"ccc...라는 걸 수정함","replyer":"ccc","regdate":1533117687000,"updatedate":1533190598000},{"rno":11,"bno":100,"replytext":"Ajax로 댓글 작성 후 화면 새로 고침 없이 막바로 되나?","replyer":"Ajax","regdate":1533117629000,"updatedate":1533117629000},{"rno":10,"bno":100,"replytext":"실리콘 벨리에서의 개발자의 삶","replyer":"실리콘","regdate":1533117004000,"updatedate":1533117004000},{"rno":9,"bno":100,"replytext":"이름이 없는 분이 댓글을 자꾸다네~~~ㅋㅋㅋ","replyer":"홍길동","regdate":1533116371000,"updatedate":1533116371000},{"rno":6,"bno":100,"replytext":"미션 임파시블 영화 많이 봐주세요~  from 톰크루즈","replyer":"톰크루즈","regdate":1533115205000,"updatedate":1533190943000},{"rno":3,"bno":100,"replytext":"둘리야 놀자","replyer":"또치","regdate":1533009522000,"updatedate":1533009522000},{"rno":2,"bno":100,"replytext":"감사합니다","replyer":"홍길동","regdate":1533008551000,"updatedate":1533008551000},{"rno":1,"bno":100,"replytext":"수정한 댓글입니다.","replyer":"user00","regdate":1533006012000,"updatedate":1533020309000}]

이러한 데이터를 순차적으로 취급할때는 jQuery가 제공하는 .each()함수를 많이 이용한다. 

아래는 each()함수의 Syntax이다.

.each( function )

이 함수는 jQuery object나 DOM의 특정 element에 대해 for loop과 같은 반복문 동작을 수행한다.

(Iterate over a jQuery object, executing a function(each함수 안에 있는 function) for each matched element.)

파라미터의 function은 다음과 같은 형태로 되어 있다.

function(Integer index, Element element)

위의 JSON 데이터가 담겨 있는 mData에 대해 다음과 같이 처리할수 있다.

var str = "";

//for loop과 같은 반복문이다.

$(mData).each(function(){

//이 경우의 this는 mData라는 객체를 의미한다.

str += "<li>" + this.rno + ":" + this.replytext + "</li>";

});

.each()에 대해 좀더 간단한 예를 통해 이 함수의 기능을 살펴 보면

다음과 같은 내용이 있다고 할때

<ul>

     <li>Android</li>

     <li>Java</li>

     <li>Spring MVC</li>

</ul>

위의 li안에 있는 각 항목들을 모두 출력해 볼려면 jQuery의 .each()함수를 다음과 같이 이용하면 된다. 

아래의 경우는 DOM의 element 중에서 li라는 element에 대해 for loop 기능을 수행하겠다는 것이다.

$("li").each(function(index) {

//여기서 this는 li를 의미한다.

console.log(index + " : " + $(this).text());

});

결과는 다음과 같이 출력될 것이다.

0 : Android

1 : Java

2 : Spring MVC