자바스크립트 배열로 검색하기

체크박스로 선택을 하면 각 체크박스 종류에 따른 배열이 생성된다.

다음처럼 체크박스를 선택한다면 컨트롤러에는 배열이 전달된다.

ajax로 통신된 data에서 address skill position 는 배열이다.

            let data = {
                address: addressValues,
                skill: skillValues,
                position: positionValues,
                career: careerValue
            }

자바스크립트로 보낸 배열을 json으로 변환한뒤에 컨트롤러에서 json을 받기 위해서는 첫번째로 @RequestBody를 파라미터에 넣어한다.

    @PostMapping("/jobs/info/list")
    public ResponseEntity<?> searchJobsSize(@RequestBody JobsCheckBoxReqDto jDto, Model model){
        // System.out.println("테스트 : "+ jDto.toString());
        if( jDto.getCareer() == null || jDto.getCareer().isEmpty()){
            jDto.setCareer("");
        }
        List<JobsSearchRespDto> jDtos = jobsRepository.findByCheckBox(jDto);
        return new ResponseEntity<>(new ResponseDto<>(1, "검색 성공", jDtos.size()), HttpStatus.OK);
    }

스프링이@RequestBody를 통해서 json을 자바 오브젝트로 파싱해주는데 JobsCheckBoxReqDto 는 자바스크립트에서 보낸 배열을 받기 위해 List를 가져야 한다.

    @Getter
    @Setter
    public static class JobsCheckBoxReqDto{
        private List<String> address;
        private List<String> skill;
        private List<String> position;
        private String career;
    }

입력된 내용이 없으면 null이 쿼리에 들어가게 되어서 career에 공백을 넣어 줬는데 배열은 배열을 받는 동적쿼리에서 설정을 했다.

쿼리의 파라미터를 자바오브젝트로 받았다면 아래처럼 동적쿼리를 이용해서 처리한다.

@Param("jDto") JobsCheckBoxReqDto jDto

<select id="findByCheckBox" resultType="shop.mtcoding.project.dto.jobs.JobsResp$JobsSearchRespDto">
      select ~~~ required_skill_tb r  ~~~ 쿼리 생략
        where 
        <if test="jDto.address != null and jDto.address.size() > 0">
          address in 
          <foreach collection="jDto.address" item="address" open="(" close=")" separator=",">
            #{address} 
          </foreach>
          and
        </if>
        <if test="jDto.skill != null and jDto.skill.size() > 0">
          ( r.skill_name1 in 
          <foreach collection="jDto.skill" item="skill" open="(" close=")" separator=",">
            #{skill} 
          </foreach>
            or r.skill_name2 in 
          <foreach collection="jDto.skill" item="skill" open="(" close=")" separator=",">
            #{skill} 
          </foreach>
            or r.skill_name3 in 
          <foreach collection="jDto.skill" item="skill" open="(" close=")" separator=",">
            #{skill} 
          </foreach>
           ) and
        </if>
        <if test="jDto.position != null and jDto.position.size() > 0">
          position in 
          <foreach collection="jDto.position" item="position" open="(" close=")" separator=",">
            #{position} 
          </foreach>
          and
        </if>
        career regexp #{jDto.career}
    </select>

if 동적쿼리를 이용해서 조건을 검색했다.
test에는 변수.필드 로 값을 가져와서 조건에 넣었고 in 을 이용해서 값이 존재하면 결과를 컨트롤러에 보내려고 한다.


배열을 in 조건에 넣기 위해서는 foreach 동적쿼리를 사용한다.

          <foreach collection="jDto.address" item="address" open="(" close=")" separator=",">
            #{address} 
          </foreach>

collection 에는 들어오는 배열이나 리스트의 번지를 입력한다.
item 에는 실제 클래스의 필드명을 입력한뒤에 위와 같은 조건들로 ('서울', '경기도', '제주') 를 구현한다.

테이블의 여러 칼럼과도 체크를 하기 위해서 skill 확인에는 ( ) 를 시작과 끝에 넣었다.

career는 라디오 타입으로 컨트롤러에서 null처리를 했으므로 간단하게 정규표현식으로 검색한다.


선택된 결과를 화면에 전송하면 아래처럼 검색을 할 수 있다.

결과는 remove와 render() 함수를 만들어 append()를 이용해서 추가해줬다.

function renderInfo(jDtos) {
        jDtos.forEach(jDto => {
            let el = `
            <div class="col-3 px-2 py-2 remove-card">
                <a href="/jobs/`+jDto.jobsId+`">
                    <div class="card">
                        <div>
                            <img src='`+ jDto.photo + `' alt="" srcset="">
                        </div>
                        <div class="card-body">
                            <div>
                                `+ jDto.compName + `
                            </div>
                            <div class="fs-5">
                                `+ jDto.title + `
                            </div>
                            <div>
                                `+ jDto.skillName1 + " " + jDto.skillName2 + " " + jDto.skillName3 + `
                            </div>
                            <div>
                                `+ jDto.career + " " + jDto.education + " " + jDto.address + `
                            </div>
                            <div class="d-flex justify-content-between">
                                <div><i id="scrap-`+ jDto.jobsId + `" class="fa-regular fa-star"
                                       token template-punctuation string">`+ jDto.jobsId + `)"></i>
                                    <input type="hidden" id="endDate-`+ jDto.jobsId + `" value="` + jDto.endDate + `">
                                </div>
                                <div>

                                </div>

                            </div>
                        </div>
                </div>
                </a>
            </div>
            `;

            $('.info-card').append(el);
        });
    }