중간 프로젝트_필터 검색(가격)_Array.prototype.filter

#1 js에서 ajax를 통해 상품목록 출력

기존에는 jsp파일에서 <c:forEach>를 사용해 배열을 출력해줬음

하지만, 이렇게 받아온 데이터(상품배열)는 js에서 사용이 불가

productList.jsp

 

 

js에서 ajax를 통해 데이터를 받아와서 상품목록을 출력해주고,

데이터를 변수에 저장해서 js에서 사용가능하게 해야함

@WebServlet("/productList")로 요청 후, 받아온 데이터 사용 예정

↓ ↓ ↓

ProductList.java

json 형태로 전달

[ {"key":value, "key":value, ...}, { "key":value, "key":value, ...}, ... ]

productList.js

productList.js

 

insertAdjacentHTML('beforeend', productListForm(data)) 메서드를 통해

아래 jsp코드에 HTML코드가 추가되고 있을 것임

productList.jsp

 

#2 검색 필터_가격

 

조건에 부합하는 객체만 true로 반환되어 true인거를 골라내서 통째로 datas에 저장

productList는 건들지 않고 필터링된 새로운 배열을 생성해 datas에 저장

 

Array.prototype.filter 메서드

• 배열의 각 요소를 돌면서 조건을 만족하는 요소만을 새로운 배열로 반환하는 JavaScript 배열 메서드
• 기존 배열을 변경하지 않고 새로운 배열을 생성

 

지정한 가격 범위에 해당하는 상품만 잘 출력됨