JSP에서 data set 활용하기

대댓글 구현 시 JSP에서 HTML 요소에 데이터를 저장하고 활용할 수 있다고 한다. 

대댓글을 구현하기 위해서는 해당 댓글의 부모 댓글 아이디 값을 계속 가지고 있다가 넘겨줘야 하는데 

이때 data set을 활용하면 매우 간편해진다. 

 

그리고 이 저장한 값을 javascript 나 서버에서 해당 댓글의 대댓글을 식별하는데 사용할 수 있다. 

 

이를 위해 HTML 요소에 'data-*' 속성을 사용할 수 있다. 

 

특정 댓글에 답글달기 버튼을 클릭할 때 해당 댓글의 식별자를 javascript 로 가져와 서버로 전송하여 대댓글을 생성한다. 

<ul id="commentDiv" style="max-height: 500px; overflow-y: scroll;overflow-x: hidden;">

    <c:forEach var = "commentList" items="${commentList}">
        <li class="commentData" data-no="${commentList.commentId}" data-name="${commentList.username}" data-date="${commentList.createdDate}" data-parent="${commentList.parentId}">
                <div class="commentDiv" style="padding-left: 2rem;">
                    <div class="commentHead">
                        <div class="commentHead1">
                            <div class="commentName">${commentList.username}</div>
                            <div class="commentDate">${commentList.createdDate}</div>                                                        
                        </div>
                        <div class="commentHead2">
                            <div class="commentReply">답글</div>
                            <div class="commentModify">수정</div>
                            <div class="commentRemove">삭제</div>
                            <div class="commentCancle" style="display:none;">취소</div>
                        </div>
                    </div>
                    <div class="comment">
                        <p id="commentContent">${commentList.commentContent}</p>
                    </div>
                </div>
                <hr class="sidebar-divider d-none d-md-block">
            </li>
    </c:forEach>
</ul>

 

function dataSet() {
	$('.commentData').each(function() {
		// 댓글의 데이터 가져오기
		var commentId = $(this).data('no');
		var username = $(this).data('name');
		var createdDate = $(this).data('date');
		var parentId = $(this).data('parent');
		var commentContent = $(this).find('#commentContent').text(); // 댓글 내용

		// 예시: 각 댓글의 정보 콘솔에 출력
		console.log("Comment ID:", commentId);
		console.log("Username:", username);
		console.log("Created Date:", createdDate);
		console.log("Parent ID:", parentId);
		console.log("Comment Content:", commentContent);
	})
}