[JavaScript, JSTL] JAVA List 객체(JSTL) JS에서 사용하기

웹 개발 중 자바에서 화면으로 보낸 값을 자바스크립트에서 사용해야할 때가 있다.

** 모델, 뷰를 반환하는 방법은 다양한데 매번 까먹는다😩 > 2021.11.14 - [JAVA/SPRING] - [SPRING] Model, ModelMap, ModelAndView 차이점

[SPRING] Model, ModelMap, ModelAndView 차이점

 

암튼 중요한건 동작 순서가 아래와 같다는거!!!

JAVA > JSTL > HTML > JAVASCRIPT

 

** JAVA에서의 값을 JavaScript에서 원한다면 JSTL을 통해서 가져올 수 있다.

 

먼저 간단한 문자열같은 경우 크게 어려운게 없다.

📄 Controller.java

@GetMapping("/")
public ModelAndView test1() {
    ModelAndView mv = new ModelAndView("/test/test1122"); //view 경로
    mv.addObject("hello", "hello");

    return mv;
}

📄 JSP

<c:out value="${hello}"/>

📄 JavaScript

var hello='${hello}';
console.log(hello);

문자열이니 ${} 변수 선언시 ''으로 감싸줘야 인식한다.

 

하지만 넘겨주는 변수가 리스트일 경우 똑같이 작성하면 안된다..

📄 Controller.java

@GetMapping("/")
public ModelAndView test() {
    ModelAndView mv = new ModelAndView("/test/test1122");
    mv.addObject("boardList", boardService.findBoardAll());
    return mv;
}

📄 JavaScript

var data = ${boardList};
console.log(typeof (data));

이렇게 리스트 형태로 된 변수를 직접 받으면

이렇게 오류가 난다. JS 변수를 new Array() 로 선언해줘도 동일하게 오류가 난다.

var data = [com.study.boot.payload.response.BoardDto@2dfec55,
            com.study.boot.payload.response.BoardDto@7e7ae3f6,
            com.study.boot.payload.response.BoardDto@744531e8,
            com.study.boot.payload.response.BoardDto@71e2d79,
            com.study.boot.payload.response.BoardDto@7a5ec48b,
            ...];

그 이유는 위와 같다. 개발자 도구에서 변수를 어떻게 가져오나 보면 List<DTO>를 저렇게 가져와버린다..

뭔가 자바에서 넘겨줄때 가공이 필요한거같은데 이건 더 공부해봐야할듯..!

 

예전에 분명 어떻게 JSTL로 변수 지정해서 JS에서 가져왔던거같은데 기억이 잘 안난다.. 그냥 그건 문자열이었나?

암만 찾아도 안나오길래 그냥 찾아본대로 forEach문을 돌려 JSTL 변수를 JS로 새로운 리스트를 만들어줬다.

 

📄 JavaScript

var arr = new Array();
<c:forEach var="data" items="${boardList}">
  arr.push({
    "boardNo": "${data.boardNo}"
    , "boardTitle": "${data.boardTitle}"
    , "memberName": "${data.memberName}"
  })
</c:forEach>

JavaScript에서는 JSTL의 EL이 사용 가능하다.

 

이러면 정상적으로 리스트가 생성되는걸 볼 수 있다.