이센스
30
2019-06-26 18:29:36
3
160

ajax로 받아온 json 값을 view에 찍어주질 못하겠습니다.


안녕하십니까 선배님들 

너무 진전이 없어서 답답해 자괴감에 빠지고 있습니다 ㅠㅠㅠ

질문 하나 드리겠습니다. 


fullcalendar 라이브러리를 이용해서 시간설정 기능을 구현하고 싶은데요.

제목처럼 서버에서 가져온 json 데이터를 view에서 어떻게 적용해야 할지 모르겠습니다.

먼저 controller와 service 입니다.


//controller
    @ResponseBody
    @RequestMapping(value = "/calendar/loadSchedule")
    public String loadSchedule() throws Exception {
        return calendarService.getSchedule();
    }

//service
    public String getSchedule() {
        Gson gson = new Gson();
        JsonObject jsonObj = new JsonObject();
        List<ScheduleVo> resultList = new ArrayList();
        resultList = calendarRepository.getSchedule();
        try {
            JsonArray jsonArr = new JsonArray();
            for (int i = 0; i < resultList.size(); i++) {
                JsonObject arrInJson = new JsonObject();
                arrInJson.addProperty("scheduleId", resultList.get(i).getScheduleId());
                arrInJson.addProperty("start", resultList.get(i).getStart());
                arrInJson.addProperty("end", resultList.get(i).getEnd());
                jsonArr.add(arrInJson);
            }
            jsonObj.add("item", jsonArr);
        } catch (Exception e) {
            e.printStackTrace();
        }
        String resultJsonArr = gson.toJson(jsonObj);

        String resultJson = gson.toJson(resultList);
        log.info(resultJson);
        log.info(resultJsonArr);
        return resultJsonArr;
    }

service에서 json과 jsonArray 둘다 해본 이유는 혹시나 fullcalendar 에서는 jsonArray로 넘겨 주어야 하는건가 싶어서입니다. 


jquery 입니다.


events: function(start, end, timezone, callback) {
            $.ajax({
                type: 'POST',
                url: '/calendar/loadSchedule',
                dataType: 'json',
                success: function (result) {
                    console.log(typeof result);
                    var stringJson = JSON.stringify(result);
                    console.log(stringJson);
                    var start = moment(result.startDate).format('YYYY-MM-DD');
                    var end = moment(result.endDate).format('YYYY-MM-DD');
                    console.log(start);
                    console.log(end);
                    var events = []; 
                    $.each(result, function (index, value) {
                        events.push({ 
                        id: value.scheduleId,
start: value.start,
end: value.end
}); }); console.log(events) callback(events); } }); },

맨윗줄에 events : 이부분은 라이브러리 옵션명입니다. 

9line 의 stringJson 을 콘솔에 찍어 보면 


{"item":[{"scheduleId":0,"start":"201906260830","end":"201906261000"},{"scheduleId":0,"start":"201906290900","end":"201906291430"},{"scheduleId":0,"start":"201906280830","end":"201906281230"}]}


이렇게 원하는 값이 잘 넘어 온것을 확인 할수 있는데,

반복문 이후 events 값은 id, start, end 모두 undefined 입니다.


해결방법을 알고 계시거나 제가 놓치고 있는부분을

알려주시면 감사하겠습니다.





0
0
  • 답변 3

  • humorist
    59
    2019-06-26 18:40:25

    each 안에 console.log(value);가 

    어떤식으로 나오는지 확인하셔야 할듯합니다

    0
  • blgrm
    4
    2019-06-26 20:22:01

    배열이 result 객체의 item 이라는 키값에 해당하는 값에 들어있는것으로 보이는데 each 문에서 result 가 아니라 result.item을 대상으로 해보시면 되지않을까요??

    0
  • 이센스
    30
    2019-06-26 22:12:22

    humorist 님    감사합니다만 반복문안에서도 확인이 안되어서요....

    blgrm 님 감사합니다. ㅠㅠㅠㅠ key값 적으니까 들어 가는것 같습니다. ㅋㅋㅋㅋ 또 다른 경고 떴지만

    즐겁게 가볼게요 ㅋㅋㅋ감사합니다!!!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.