jstl의 forEach 를 javascript로 전달

DB에서 값을 쿼리해서 뿌려줄때 forEach문을 쓰곤 합니다. 

 

그런데 이 값을 JavaScript에서 써야 할 때가 있습니다.

 

예를 들어 A라는 사용자가 대출한 책이 a,b,c 3권이라 하면, A의 대출목록을 조회했을때 a,b,c가 떠야합니다.

그리고 a라는 대출도서를 반납했으므로 대출목록에서 삭제를 하게되면 이 a만 가져와서 sql문으로 

삭제를 해야하는데요.

forEach문으로 대출목록을 돌려서 표현해주면 a라는 도서를 선택하는 것이 쉽진 않습니다.

이 때 이렇게 하시면 됩니다.

<c:forEach var="mo" items="${model}" varStatus="status" >
<tr >
   
    <td align="center"><input type="text" value="${mo.mac}" name="book"/></td>
    <td align="center"><input type="text" value="${mo.nick}" name="lend_date"/></td>
    <td align="center"><input type="hidden" name=currentbook${status.index}  value="${mo.book}"/>
    <input type="button" value="clear" onclick="deletingBook(currentbook${status.index})"/>
</td>
   
</tr>
</c:forEach>

위와 같이 1번라인에서 forEach문을 써서 model을 mo라는 변수에 집어넣었습니다.

그리고 라인4~7까지 보면 루프로 화면에 display해줍니다.

그리고 라인 7이 Javascript로 전달하는버튼인데, onclick쪽에보시면

deletingBook()라는 함수로 변수명 currenbook${status.index}를 보냅니다.

currentbook${status.index}는 라인 6의 hidden타입으로 book이름이 저장되어 있습니다.

굳이 라인6번에 hidden타입으로 변수를 만들어서 보내는 이유는, 머 잘 아시겠지만,

book이 하나일경우에는 상관이 없지만, book이 2권이상이 되는 순간~

라인4의 book이 여러개가 됩니다. 그래서 Javascript로 보낼 수 가 없습니다.

하지만 라인 1에서 varStatus 를 속성에 추가를 해주게 되면, forEach문의 index값을 알 수가 있습니다.

그리고 이 인덱스값을 이용해서 라인 6번처럼 고유의 변수명을 만들어 주면 javascript로 보낼 수가 있게 됩니다.

말로 설명 하려니 어렵네용;;

암튼, javascript에서는 고유의 변수명을 받게되고, 이 변수의 value값을 db에서 지우면 됩니다.

function deletingBook(bookname){
    var answer=confirm("선택하신 도서를 대출목록에서 삭제하시겠습니까?");
        if(answer){
            var url = 'deletingBook.do?bookname=' + bookname.value;
                window.open(url, "_self",  '');
        }  
    }

위와 같이 javascript로 구성하시면 됩니다.

confirm은 저번포스팅에서 했으니~아시겠죠?^^