JSTL : <c:foreach> 


JSTL의 반복문인 foreach에 대해 사용방법을 포스팅하고자 합니다.


foreach는 우선 일반적 프로그래밍언어에서 사용하는 for문과 동일 합니다.


반복문으로 사용이되고 주로 목록을 반복해서 출력할경우 사용합니다.



<c:foreach> 사용법 


1
2
3
4
5
<c:forEach var="item" items="${list}" varStatus="vs" begin=0 end=5 step=1>
    <c:out value="${item.id}"/>
    <c:out value="${item.name}"/>
    <c:out value="${item.age}"/>
<c:out value="${vs.index}"/>
</c:forEach>
cs


위와 같은 샘플 코드를 기준으로 forEach 문법의 속성을 설명을 드리겠습니다.


*var

*items

varStatus

begin

end

step 

 사용할 변수

Collection객체(List, ArrayList)

 반복 index 변수

시작 index

종료 index

반복시 이동 index



#1 : var, items (필수)


 우선 필수 속성 값으로는 var, items 입니다. 그외 속성은 무시 하셔도 forEach문은 정상 동작을 합니다.


 var의 경우는 items에 담겨있는 List 객체를 변수를 통하여 화면에 보여줄수가 있습니다.


 예를 들자면, ArrayList안에 name이라는 키를가진 {"김", "이", "박"} 이라는 데이터가 존재한다면, item.name을 하게된다면 foreach가 반복되면서 순서대로 출력되게 됩니다.


 만약 varStatus, begin, end, step을 생략하게된다면, 시작index 0부터 list사이즈에 맞게 종료하게 됩니다.



#2 : begin, end, step (선택)


begin은 시작 index를 의미하고, end 종료 index, step은 index 이동량을 의미합니다.


만약 생략하게 된다면 begin은 0, end는 items 크기 - 1, step은 1로 설정이 됩니다. 



#3 : varStatus (선택)


 varStatus의 경우 변수명을 지정후 반복문을 실행한다면, 현재 foreach의 상태를 알수가 있습니다.


${vs.current} : 현재 아이템


${vs.index} : 0부터의 순서


${vs.count} : 1부터의 순서 


${vs.first} : 현재 루프가 처음인지 반환


${vs.last} : 현재 루프가 마지막인지 반환


${vs.begin} : 시작값


${vs.end} : 끝값 


${vs.step} : 증가값





<c:forEach> 마무리 


위와 같은 foreach 속성과 동일한 자바스크립트 for문 문법을 예시 입니다.


1
2
3
4
5
for (var vs=0; vs < 5; vs++) {
    console.log(item[item].id);
    console.log(item[item].name);
    console.log(item[item].age);
console.log(vs);
}
cs


또한, JSTL의 forEach문법은 html뿐만아니라 javascript안에서도 동작을하기 때문에 활용 할 수 있습니다.


forEach를 통하여 원하는 index의 값만 가져올수도 있으며, 기존 프로그래밍언어의 for문과 흡사합니다.


마지막으로 forEach문의 원하는 index데이터를 가져오는 예시문을 작성으로 마무리 하겠습니다.


1
2
3
4
5
[
[{name = 김, age = 20}], 
 
[{name = 박, age = 21}]
]
cs


위와 같은 샘플 데이터 List가 있다는 가정을 하겠습니다. 


1
2
3
4
5
<c:forEach var="item" items="${list}" varStatus="vs">
    <c:out value="${list[vs.index].name}"/>
    <c:out value="${list[1].id}"/>
</c:forEach>
 
cs

해당 forEach문을 실행한다면 결과는 [김 21 박 21] 이 출력됩니다.


JSTL의 forEach문은 자바스크립트 또한 HTML에서 많은 활용이 가능합니다.



반응형

+ Recent posts