json 형식의 데이터를 Gson을 사용해 주고 받아보자!

다음 코드는 Respets 프로젝트 때 사용한 json 형식의 데이터를 Gson으로 view단으로 넘기는 작성한 코드이다 (재활용...ㅎ)

참고로 json 형식은 날짜 형식을 지원하지 않는다. 그래서 @DataTimeFormat(iso=ISO.DATE) 어노테이션을 사용해 주었다.

그래야 예쁘게... 당황스럽지 않게 날짜 형식이 잘 출력된다.

/* 개인 캘린더 */

@DateTimeFormat(iso=ISO.DATE)

public ModelAndView personalCalendar(HttpSession session) {

mav = new ModelAndView();

String view = null;

// 회원번호

String no = session.getAttribute("no").toString();

List<HashMap<String, Object>> bookingList = new ArrayList<HashMap<String, Object>>();

List<HashMap<String, Object>> bList = new ArrayList<HashMap<String, Object>>();

// 회원의 간략한 예약일정을 검색 (예약번호,펫이름,기업명,업종명,방문시간)

bookingList = pDao.getPerCalendar(no);

mav.addObject("no", no);

for (int i = 0; i < bookingList.size(); i++) {

HashMap<String, Object> hmap = new HashMap<>();

String bk_no = bookingList.get(i).get("BK_NO").toString();

String petName = bookingList.get(i).get("PET_NAME").toString();

String busName = bookingList.get(i).get("BUS_NAME").toString();

String bctName = bookingList.get(i).get("BCT_NAME").toString();

String bus_addr = bookingList.get(i).get("BUS_ADDR").toString();

String bus_addr2 = bookingList.get(i).get("BUS_ADDR2").toString();

if (bctName.equals("병원")) {

bctName = "진료";

}

String start = bookingList.get(i).get("VS_START").toString();

String end = bookingList.get(i).get("VS_END").toString();

// 데이터 입력

hmap.put("title", petName + ": " + busName + "[" + bctName + "]");

hmap.put("start", start);

hmap.put("end", end);

hmap.put("bk_no", bk_no);

hmap.put("pet_name", petName);

hmap.put("bus_name", busName);

hmap.put("bct_name", bctName);

hmap.put("bus_addr", bus_addr);

hmap.put("bus_addr2", bus_addr2);

if (bctName.equals("진료")) {

hmap.put("className", "bg-warning");

} else if (bctName.equals("미용")) {

hmap.put("className", "bg-success");

} else {

hmap.put("className", "bg-info");

}

bList.add(hmap);

}

//json

Gson gson = new GsonBuilder().create();

String json = gson.toJson(bList);

mav.addObject("e", json);

view = "personalCalendar";

mav.setViewName(view);

return mav;

}

해시맵에 열심히 담아 담아서 json으로 한방에 view단으로 넘기는 방법이다. 

핵심은 Gson을 쓴다는 것.... Gson은 혁명이다 최고

자 한번 view 단으로 가보자

var jsonData = ${e};

        console.log(jsonData);

        for(var i=0; i<jsonData.length; i++) {

        console.log(jsonData[i].bk_no);

        console.log(t.start);

        console.log(t.start._i)

        

            var l = this,

                i = e("<form></form>");

            i.append("<label>"+t.title+"</label>"),

                i.append("<p><br/> 업체명: " + t.bus_name 

                + "<br/><br/> 예약 시간: " + t.start._i 

                + "<br/><br/> 업체 주소: " + t.bus_addr + " " + t.bus_addr2 + "</p>"),

                l.$modal.modal({

                    backdrop: "static"

                }), l.$modal.find(".delete-event").show().end().find(".save-event").hide().end().find(".modal-body").empty().prepend(i).end().

            find(".delete-event").unbind("click").click(function () {

                l.$calendarObj.fullCalendar("removeEvents", function (e) {

                        return e._id == t._id

                    }),

                    l.$modal.modal("hide")

            }), l.$modal.find("form").on("submit", function () {

                return t.title = i.find("input[type=text]").val(),

                    l.$calendarObj.fullCalendar("updateEvent", t), l.$modal.modal("hide"), !1

            })

        }

이런식으로 el을 이용해 보낸다음 javaScript에서 뽑아낸다. 한군데 더있다. 보자...

 t.prototype.init = function () {

            this.enableDrag();

            var data = ${e}; //json으로 받아 온 데이터

            var t = new Date,

                n = (

                    t.getDate(), t.getMonth(), t.getFullYear(),

                    new Date(e.now())),

                a = data,

                l = this;

            l.$calendarObj = l.$calendar.fullCalendar({

                    slotDuration: "00:15:00",

                    minTime: "08:00:00",

                    maxTime: "19:00:00",

                    defaultView: "month",

                    handleWindowResize: !0,

                    height: e(window).height() - 200,

                    header: {

                        left: "prev,next today",

                        center: "title",

                        right: "month,agendaWeek,agendaDay"

                    },

여기서는 이제 변수 data안에 담아준다. 참고로 이 코드는 fullCalendar로 개인 캘린더를 만든 부분이다. 구현 화면도 한번 볼까..?

이런식으로 구현이 됐다. 여튼 핵심은 json형식은 Gson을 통해 주고 받으면 편하다는 것이다.