JSTL forEach if 사용법 table 테이블 만들기 반복문

 

JSTL  forEach if 사용법 table 테이블 만들기 반복문

 

Spring 구조에서 JSONArray 형태로 받은 데이터를

JSTL 을 활용해 jsp 리스트(테이블)를 만드는 방법에 대해 포스팅 하겠습니다.

말은 복잡한거 같지만 간단합니다.

 

Controller 와 Service, DAO, sql 에서 데이터를 가공해 가져오는 것은 

대략적으로만 설명하고 jsp 에서 테이블을 생성하는 위주로 설명하겠습니다.

JSONObject 와 JSONArray에 대한 설명은 Link를 참조하세요.

 

Link : JSONObject 와 JSONArray에 대한 설명

 

JSONObject에 JSONArray 형태로 담겨있는 데이터를 Cotroller 에서 받아

 

ModelAndView 의 형태로 웹(JSP) 에 Return 합니다.

 

[Controller]

 

ModelAndView mav = getCommonView( type, "", "");
JSONObject jObj = noticeService.getNoticeList(request, response);
mav.addObject("json", jObj);
return mav;

 

 

[JSP]

JSTL 다운 및 설정은 Link를 참조하세요.

 

Link :  JSTL(JSP Standard Tag Library) 이란? JSTL 다운로드 Download

 

jsp에서는 Controller 로 부터 받은 데이터를 JSTL 형식으로 set 합니다.

<c:set var="List" value="${requestScope['json'].List}"/>

 

requestScope 는 단순 request map 객체를 가져오는 것 입니다.

 

가져온 데이터의 형태를 보도록 하죠.

위에서도 말씀드렸 듯이 JSONObject내에 JSONArray 형태로 담겨있습니다.

 

---

[json]

{

    "List": [

        {

            "컬럼1": "데이터1",

            "컬럼2": "데이터2",

            "컬럼3": "데이터3"

        },

        {

            "컬럼1": "데이터4",

            "컬럼2": "데이터5",

            "컬럼3": "데이터6"

        },

        {

            "컬럼1": "데이터7",

            "컬럼2": "데이터8",

            "컬럼3": "데이터9"

        }

    ]

}

 

---

 

그럼 이제 가져온 리스트를 뿌려주는 것만 남았네요.

 

 

가져온 JSONarray 형태의 데이터를 뿌려주기 위해서는 반복문이 필요하겠죠.

JSTL 에서의 반복문은 <c:forEach> 를 사용합니다.

HTML에서 Table을 만드는 방법은 Link를 참조하세요.

 

Link : HTML 테이블 만들기

 

---

 

<table summary="목록">
    <caption>
        <span>목록</span>
    </caption>
    <thead>
        <tr>
            <th>첫번째값</th>
            <th>두번째값</th>
            <th>세번째값</th>
        </tr>
    </thead>
</table>

 

//리스트의 값이 없을 경우 '현재 데이터가 없습니다'라는 문구를 보여줌

 

<c:if test="${List.size() == 0 }">
	<tfoot>
		<tr>
			<td colspan="3">현재 데이타가 없습니다.</td>
		</tr>
	</tfoot>
</c:if>
<tbody>
	<c:forEach var="result" items="${List}" varStatus="status">
		<tr>
			<td><c:out value="${result.컬럼1 }"/></td>
			<td><c:out value="${result.컬럼2 }"/></td>
			<td><c:out value="${result.컬럼3 }"/></td>
		</tr>
	</c:forEach>
</tbody>
</table>

---

 

forEach 를 사용하여 List의 갯수만큼 반복하게 됩니다.

그리고 <c:out>을 통해 List의 각 컬럼의 데이터값을 뿌려주게 되죠.

그럼 아래와 같은 형태의 테이블이 생성됩니다.

(forEach 는 item의 값을 var로 받아 그 내에서는 var의 값으로 사용합니다. var="result")

 

첫번째값	두번째값	세번째값
데이터1	데이터2	데이터3
데이터4	데이터5	데이터6
데이터7	데이터8	데이터9

 

만일 Java Script로 테이블을 만든다면

<% for (i=0; i<List.size(); i++){%>

<td><%=List.getJSONObject(i).getString("컬럼1")%></td>

.....

<% } %>

뭐 이런식의 코딩이 되었겠죠.

JSTL이 깔끔하긴 합니다.