[Javascript] c:forEach문의 index 가져오기

 

 

c:forEach문의 index 가져오기

Javascript에서 jsp의 forEach의 순번을 어떻게 가져오나 고민했다.

varStatus도 모르겠고 그냥 1~n이니까 나도 for문 돌리려다가 실패했다.

화가 빡빡 났다. 나의 짧은 지식에 분개했다.

 

두 가지의 문제였다.

1. forEach 돌면서 바뀌는 div의 index 가져오는 법
2. 해당 index의 aId의 값 가져오기
3. javaScript에서 배열의 key에 변수 넣는 법

 

해당 query

<c:forEach var="a" items="${aList}">
    <div class="div" id="a${a.aId}">
        <c:choose>
            <c:when test="${not empty a.aHTML}">
                <div class="page type01">
                    <input type="hidden" name="a_id" value="${a.aId}">
                </div>
            </c:when>
        </c:choose>
    </div>
</c:forEach>


<script>

aDiv.forEach((a, index) => {
    let aId = a.querySelector('input[name=a_id]').value;
    list.push({[aId] : testA(a, aType)});
});
</script>

1. a는 VO Class의 이름이자 값이 저장된 저장 공간이다. 내가 원하는 건 돌아가는 div의 index와 해당 index의 aId의 값.

원래 aId의 값을 가진 div가 따로 있었는데 그 div의 Id 값이 "a${a.aId}' 형식으로 되어 있었다. 그걸 가져오는 수를 도저히 찾을 수가 없어서 결국 input을 추가했다. name은 임의로 지어 주면 되고, value에 원하는 값을 넣어서 DOM으로 가져온다.

 

<input type="hidden" name="a_id" value="${a.aId}">

 let aId = a.querySelector('input[name=a_id]').value;

2. 그리고 a.querySelector forEach문 parameter로 a를 받아 왔고 돌고 있기 때문에(a1, a2, a3...), 해당 item의 해당 aId를 위하여 앞에 a를 붙여 줘야 했다.

 

list.push({[aId] : testA(a, aType)});

3. 해결하고 나서는 aId 변수 선언 전에 해당 query를 먼저 작성해 놨는데 변수 선언하고도 값이 이용되지 않고 있다는 message가 뜬다. list 배열에 key 값으로 a의 순번 즉 변수를 넣어야 하는데 말이다. 어렵잖게 찾았다. 변수는 [] 괄호를 써 주면 되었다.