[ajax] 키:값 배열 객체에 담고 배열로 순환 사용

서버 -> 클라이언트(JSP)

'키 : 값' 형태인 JSON을 직관적이게 배열에 담으려면 컨트롤러에서 List<Map<String, Object>> 

[쿼리 결과] 

 

(1) Back 결과를 객체에 담아 배열에 담기

let objArr =new Array; // 배열 선언

$.ajax({
      url : "/mbti",
      method : "post"
   }).done(function(result) {
   
   	 // Json 객체를 JS 객체에 담기
     $(result).each(function(index, item) { 
        let one = {
           no : item.no,
           name : item.name,
           mbti : item.mbti,
        };
        
    // JS 객체를 배열에 담기  
    objArr.push(one);
 });

 

(2) 객체를 담은 배열을 JS 에서 사용

 

$(objArr).each(function(index, item) {
     $(`#btnQ\${item.no}`).click(function() {
                console.log($(`.q\${item.no}:checked`).val());

                   if(item.mbti == $(`.q\${item.no}:checked`).val()) {
                       console.log("right");
                      $('#score').val(Number($('#score').val()) + 1);
                      $(`#resultQ\${item.no}`).val('정답');
                   } else {
                       console.log("nah");
                      $(`#resultQ\${item.no}`).val('오답');
                   }
                   $(`#btnQ\${item.no}`).attr('disabled', false);
              }); 
          });
      })
  });

 

 

※ 참고

$(`#btnQ\${item.no}`)  : JS : 함수표현식 사용은 벡틱 사용하면 된다.  `.... ${}`와 같이 ${}을 문자열 내에 사용 가능    :  단, 뷰가 HTML이 아니라 JSP 일때는 이스케이프 필요 `....\${}`

 

 

 

※ myBatis 쿼리 설계시 주의

 

[정적 데이터]

(성별) 남 여 

(월) 1월.... 11월 12월 

 

[동적 데이터]

(연) 23년 24년.....

(시간) 1시간, 2시간....

 

컬럼명에 데이터를 넣는 경우 

 - 컬럼명의 데이터가 동적이 아니다 

 - 컬럼명의 데이터를 사실상 뷰에서 사용하지 않는다.

위 경우가 아니라면 프론트 단에서 해당 데이터를 출력하기에는 어렵다고 생각하면 된다. 

 

실질적으로 뷰에서 사용하는 데이터는 속성이 아닌 인스턴스로 생성하자.

(for in) 문법을 사용하면 어쨋든 출력은 되지만, 모델로 사용할 부분이 통일성이 없어진다.

 

※ 아래의 경우, 0hour ~ 3hour을 고정시켜서 각 시간대에 매칭되는 건수를 출력하였다, 

컬럼명에 실질적으로 뷰에서 사용하는 데이터를 밀어 넣었으니, 모델 (인스턴스) 인 부분이 왜곡된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

쿼리 설계 

(1) 뷰에서 어떻게 쓸건지 먼저 구체화 

(2) 실질적인 값은 모두 인스턴스 값으로 배치 

(3) [{객체1}, {객체2}, {객체3}] 형태는 지양 ( 뷰에서 배열(인덱스).객체(키) 를 사용하기에는 어려움 )

Map<T> 형태 보다는 List<Map<T>> 형식으로 설계 하는게 

(=모든 값을 인스턴스레이어에 배치(모델레이어의 경계선은 디그리 레이어가 아니라 인스턴스 레이어이다)