JSON객체의 배열로 넘어온 데이터 출력하기

JSON객체의 배열로 넘어온 데이터 출력하기

---

단순히 JSON 객체로 넘어온 것이 아니라 JSON 객체 배열로 넘어온 데이터를 javascript로 출력하는 반복문을 작성하는 예제입니다.  Spring으로 프로젝트를 하는 도중에 ajax로 리스트를 받아야 하는 기능이 있었는데, 그것이 @Response 어노테이션을 이용하여 자동으로 json객체의 배열로 넘겨받는 상황이었습니다. 순간 json객체 단위로 받는 것은 많이 했었지만 json객체의 배열? 생각하니 혼란이 와서 정리해봅니다.

 var i=[{"t_no":"120","t_content":"test11","t_writer":"임광빈","obtain":"0","t_date":"2018-         04-27"},
            {"t_no":"119","t_content":"test10","t_writer":"임광빈","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"118","t_content":"test9","t_writer":"임광빈","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"117","t_content":"test8","t_writer":"임광빈","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"114","t_content":"test7","t_writer":"임광빈","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"113","t_content":"test6","t_writer":"임광빈","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"110","t_content":"hi","t_writer":"임광빈","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"109","t_content":"test5","t_writer":"임광빈","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"107","t_content":"test4","t_writer":"임광빈","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"76","t_content":"test3","t_writer":"임광빈","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"75","t_content":"test2","t_writer":"임광빈","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"74","t_content":"test1","t_writer":"임광빈","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"72","t_content":"hello","t_writer":"임광빈","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"49","t_content":"spring create","t_writer":"임광 빈","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"29","t_content":"도전과제","t_writer":"임광빈","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"28","t_content":"서블릿공부","t_writer":"임광빈","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"8","t_content":"헬로우","t_writer":"임광빈","obtain":"1","t_date":"2018-04-24"},
            {"t_no":"7","t_content":"안녕하세요.","t_writer":"임광빈","obtain":"0","t_date":"2018-04-24"},
            {"t_no":"5","t_content":"오늘할일4","t_writer":"임광빈","obtain":"1","t_date":"2018-04-24"},
            {"t_no":"1","t_content":"오늘할일1","t_writer":"임광빈","obtain":"1","t_date":"2018-04-24"}];

상황은 위의 변수처럼 json type의 객체들을 배열형태로 받는 상황이었습니다.

$.ajax({
    url:"toDoList.do",
    success:function(data){
    //json type array 처리구문
    }
});
 

위와 같이 toDoList.do url 요청을 통해 controller 단에서 toDoList를 비동기로 전달 받는 상황이었습니다.(dataType은 default로 json 형태이기 때문에 명시하지 않았습니다. 그리고 controller단에서 @ResponseBody 형태로 달아놨기에 자동으로 json 형태로 데이터를 파싱해서 보낸 상황입니다.)

보통 function(data) 에서 data가 json 객체 형태로 넘어온다면 단순히 data.name(요소) 로 출력하면 되었습니다. 하지만 배열은 이와는 조금 다른 형태로 진행됩니다.

<script>
    var i=[{"t_no":"120","t_content":"test11","t_writer":"여성게","obtain":"0","t_date":"2018-         04-27"},
            {"t_no":"119","t_content":"test10","t_writer":"여성게","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"118","t_content":"test9","t_writer":"여성게","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"117","t_content":"test8","t_writer":"여성게","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"114","t_content":"test7","t_writer":"여성게","obtain":"0","t_date":"2018-04-27"},
            {"t_no":"113","t_content":"test6","t_writer":"여성게","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"110","t_content":"hi","t_writer":"여성게","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"109","t_content":"test5","t_writer":"여성게","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"107","t_content":"test4","t_writer":"여성게","obtain":"0","t_date":"2018-04-26"},
            {"t_no":"76","t_content":"test3","t_writer":"여성게","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"75","t_content":"test2","t_writer":"여성게","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"74","t_content":"test1","t_writer":"여성게","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"72","t_content":"hello","t_writer":"여성게","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"49","t_content":"spring create","t_writer":"여성게","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"29","t_content":"도전과제","t_writer":"여성게","obtain":"1","t_date":"2018-04-25"},
            {"t_no":"28","t_content":"서블릿공부","t_writer":"여성게","obtain":"0","t_date":"2018-04-25"},
            {"t_no":"8","t_content":"헬로우","t_writer":"여성게","obtain":"1","t_date":"2018-04-24"},
            {"t_no":"7","t_content":"안녕하세요.","t_writer":"여성게","obtain":"0","t_date":"2018-04-24"},
            {"t_no":"5","t_content":"오늘할일4","t_writer":"여성게","obtain":"1","t_date":"2018-04-24"},
            {"t_no":"1","t_content":"오늘할일1","t_writer":"여성게","obtain":"1","t_date":"2018-04-24"}];
    
   for(var ele in i){
        for(var ele2 in i[ele]){
            console.log(i[ele][ele2]);
        }
    }
</script>
 

배열 형태로 넘어오기 때문에 for문을 사용하여 출력해 줍니다. for(var ele in i) 에서 만약 i가 단순 배열이라면 ele에 할당되는 데이터는 배열의 인덱스 숫자입니다.(0,1,2.....i.length) 하지만 이번에 전달 받은 data 변수는 일반 배열이 아닌 json객체의 배열이므로 ele에 할당되는 데이터는 조금 다릅니다. 하지만 로그를 남기는 부분의 코드를 보면 배열과 흡사하다 못해 아주 똑같은 형식입니다. 즉 ele2는 json 객체의 key값이 할당되는 것입니다. 

i[ele][ele2] -> i[0,1...i.length][t_no,t_content......t_date] 이런식으로 값이 할당 됩니다. 

for(var ele in i){
        /*for(var ele2 in i[ele]){
            console.log(i[ele][ele2]);
        } */
        console.log(i[ele].t_no);
        console.log(i[ele].t_content);
        console.log(i[ele].t_writer);
        console.log(i[ele].obtain);
        console.log(i[ele].t_date);
    }

그리고 두번째로는 이렇게 단일 for문을 이용해 각각의 키값으로 참조해서 출력도 가능합니다.!!!  혹시 틀렸거나 부족한 부분이 있었다면 지적부탁드립니다...... :)