[JSTL] data와 li요소 항목 비교해서 표시하기

고도화를 하던 도중 li메뉴를 구성하는 방식과 카드 이미지로 표현해야 하는 부분이 같이 반영되야 하는 부분이 있었다.

이전에 구축되어 있는 환경에서 카드 이미지는 hardcoding되어 있었기 때문에 카드 이미지 data를 기준으로 li를 보여주거나 숨기는 방식을 취해야 했다.

 

1. 이미지 data를 순회하여 배열을 가져옴

2. 이미지의 value와 li를 비교하여 display || none처리

3. ajax로 html형식으로 반환

<script>
...
$.ajax({
	url: '/data?menuId=116',
	method: 'GET',
	dataType: 'html', // Controller에서 response된 응답을 html형식으로 받음
	success: function (htmlData) {
		// 응답을 html형식으로 변환
		var $html = $(htmlData);
		var indicatorListData = [];
		// .gnb-depth3 li a의 요소들을 순회하면서 value를 수집 배열로 묶음
		$html.find('.gnb-depth3 li a').each(function() {
			var menuText = $(this).text().trim();
			indicatorListData.push(menuText);
		});
		var dtValues = indicatorListData;
        
		console.log(dtValues);
		// li요소를 순회하면서 cName값을 비교
		$('.cName').each(function () {
			var liElement = $(this);
			var dtText = liElement.find('dt').text().trim();

			if (dtValues.includes(dtText)) { // 리스트에 있다면 표시
				//liElement.addClass('on');
				liElement.css('display', 'block');
			} else { // 리스트에 없으면 숨김
				//liElement.removeClass('on');
				liElement.css('display', 'none');
			}
		})
	},
	error: function (error) {
		console.error('데이터를 가져오는 중 에러 발생:', error);
	}
});
</script>

<div id="sub-content">
...
<c:choose>
	<c:when test="${topMenuName eq '메뉴명'}">
		<ul>
			<li class="cName">
				<dl>
				<dt>하위메뉴1</dt>
				<dd>
					<img src="./images/cancer-icon01.svg" class="icon" alt="" />
					<img src="./images/cancer-icon01-on.svg" class="icon hv" alt="" />
				</dd>
				</dl>
				...
			</li>
			<li class="cName">
				<dl>
				<dt>하위메뉴2</dt>
				<dd>
					<img src="./images/cancer-icon02.svg" class="icon" alt="" />
					<img src="./images/cancer-icon02-on.svg" class="icon hv" alt="" />
				</dd>
				</dl>
				...
			</li>
			<li class="cName">
				<dl>
				<dt>하위메뉴3</dt>
				<dd>
					<img src="./images/cancer-icon03.svg" class="icon" alt="" />
					<img src="./images/cancer-icon03-on.svg" class="icon hv" alt="" />
				</dd>
				</dl>
				...
			</li>
			<li class="cName">
				<dl>
				<dt>하위메뉴4</dt>
				<dd>
					<img src="./images/cancer-icon04.svg" class="icon" alt="" />
					<img src="./images/cancer-icon04-on.svg" class="icon hv" alt="" />
				</dd>
				</dl>
				...
			</li>
...