[프로젝트] 자바 오브젝트 json으로 변환 후 자바스크립트 오브젝트에 파싱

자바에서 오브젝트를 리스트 타입으로 만들어

모델에 담아 mustache로 가지고 가려고했다.

 

// 유저가 가진 시간표 목록 담기
List<Timetable> timetables = timetableService.시간표불러오기(id);
model.addAttribute("timetables", timetables);

 

머스태치에서 모델값을 찾아 자바스크립트로 제어해서 그림을 그려야하는데

자바스크립트에서 {{timetables}}는 리스트 타입이 아닌 String 타입으로 인식한다.

 

<input id="timetables" type="hidden" value="{{timetables}}">
. . .
<script>
	let timetables = $("#timetables").val();
</script>

 

각자 오브젝트의 생긴 모양새가 다르기때문에 바로 자바스크립트 오브젝트로 바꿀 수 없다.

 

Json으로 바꿔서 던져주자.

ObjectMapper를 사용하면 된다.

 

writeValueAsString( )이 자바 오브젝트를 json으로 바꿔주는 역할을 한다.

 

// 유저가 가진 시간표 목록 담기
List<Timetable> timetables = timetableService.시간표불러오기(id);

ObjectMapper om = new ObjectMapper();
String timetablesJson = om.writeValueAsString(timetables);

model.addAttribute("timetablesJson", timetablesJson);

 

다시 머스태치에서 참조했더니 오류가 발생한다.

LocalDateTime 타입의 변수를 변환하지 못한다고한다.

 

LocalDateTime 필드를 ObjectMapper 함수를 사용해 가져올 경우

JAVA 8에서 추가된 LocalDateTime 항목을 제대로 직렬화 또는 역직렬화하지 못하는 현상이다.

 

▼

 

1. build.gradle 파일에 의존성을 주입해준다.

 

// https://mvnrepository.com/artifact/com.fasterxml.jackson.datatype/jackson-datatype-jsr310
implementation group: 'com.fasterxml.jackson.datatype', name: 'jackson-datatype-jsr310', version: '2.13.2'

 

2. ObjectMapper 객체를 생성하는 부분마다 registerModule을 해준다.

 

// 유저가 가진 시간표 목록 담기
List<Timetable> timetables = timetableService.시간표불러오기(id);

ObjectMapper om = new ObjectMapper();
om.registerModule(new JavaTimeModule());

try {
    String timetablesJson = om.writeValueAsString(timetables);
    model.addAttribute("timetablesJson", timetablesJson);
} catch (JsonProcessingException e) {
    e.printStackTrace();
}

 

3. 변환하는 자바오브젝트에 null 값이 포함되어있다면

아래코드를 yml 파일에 추가해주자.

 

spring:
  jpa:
    jackson:
      serialization:
        fail-on-empty-beans: false

 

4. 자바스크립트에서 JSON으로 받아 파싱해준다.

 

<input id="timetablesJson" type="hidden" value="{{timetablesJson}}">
...
<script>
	let timetables = JSON.parse($("#timetablesJson").val());
</script>

 

JSON을 파싱해서 받은 timetables를 콘솔에 찍어보면

다음과 같이 예쁘게 파싱된 것을 확인할 수 있다.