[2016-01-05 작업내용] .each() 함수를 사용한 데이터 출력

16-01-05 작업 내용 피드백

[Ajax로 데이터 출력시 2가지 방법]

16.01.05에 작업 했던 프로젝트는 아래 스크린 샷에서 '빨간색 네모 박스'의 조회자 정보를 출력 하는 것이었습니다

아..아니잇!! 이것은?! MyInfo 페이지에서와 똑같은 데이터 잖아?

별도로 showTimetable.jsp용 Controller, Service, Dao, Vo, Mapper를 생성할까 했지만!!

자세히 보니 MyInfo (내 정보보기) 페이지에서의 데이터와 동일한 데이터라고 판단

Controller에서 MyInfoServiceImpl의 selectMyInfo_MST()로 연결지어 가져오자고 생각했습니다

이렇게 말이죠!

그럼 이제 기존에 만들어 두었던 MyInfo의 ServiceImpl과 DaoImpl을 통해 

Mapper DB에 접근해 데이터를 가져올 것입니다

이걸 Jsp에서 Ajax를 통해 페이지에 데이터를 뿌려주기만 하면 됩니다, 쉽쥬?

그래도 졸지마시고!

1) 빨간색 네모 박스가 오늘 알아 볼! .each() 함수를 사용한 방식

2) document.getElementById("id명").value 값에 response 값을 대입하는 방식(기존방식)

.each() 함수에 대해서는 jQuery API - .each() 포스팅을 통해 자세히 알아보겠습니다 

쉽게 설명하자면 .each() 함수는 jQuery의 객체 수 만큼 반복 수행을 해주는 함수 입니다

위의 예제에서 본다면 index부터 item의 수만큼 수행 된다는 의미겠지요

index는 0을 초기값으로 하게 됩니다.

for(int i=0 ; i<=item의 수 ; i++){ } 와 동일하게 보시면 될 것 같네요

결국 response를 통해 넘어오는 모든 데이터를 각각의 id가 부여된 곳에 대입된단 의미겠지요!

이는 기존의 방식처럼 일일히 대입하는 것과 똑같은 효과를 주게 됩니다.

documnet.getElementById("id명").val 에서 .each() 함수처럼 Array 항목 전체를 넘기고 싶다면,

별도의 for문으로 Array형으로 넘어오는 response를 넘겨주어야 겠죠

지금은 response[0]번째 data set만 가져오는 구조입니다:-)

어렵지 않은 구조지만 .each()는 DOM의 Loop 개념을 간결하고 최소화된 형태로 사용할 수 있는

장점이 있으니 적용해보시기 바랍니다 

---

마지막으로 결과는 정상적으로 출력 되었다는 거~ 헤헤

Console에 item을 찍어 보았습니다. 데이터가 전부 잘 넘어오네요ㅎ_ㅎ