STS3 쇼핑몰 프로젝트[18] 상품 등록 - 카테고리 리스트 구현(2)

순서

1. <select>, <option> 태그 추가

2. JSON 데이터 변환

1. <select>, <option>태그 추가

카테고리를 출력시킬 기본적인 틀로서 <select>, <option> 태그를 추가했습니다.

<div class="form_section">
    <div class="input-box bit">
    	<span class="details">상품 카테고리</span>
    </div>
    <div class="form_section_content">
        <div class="cate_wrap">
            <span>대분류</span>
            <select class="cate1">
             	<option selected value="none">선택</option>
             </select>
         </div>
         <div class="cate_wrap">
              <span>중분류</span>
              <select class="cate2" name="kind_id">
                    <option selected value="none">선택</option>
               </select>
          </div>              				                    				
      </div>
</div>

사용자가 '대분류'를 선택하게 되면 그에 맞는 '중분류' <option>가 세팅됩니다.

 

그리고 최종적으로 '중분류'를 선택하는 것은 상품 등록에 필요로 한 "kind_id" 데이터를 선택하는 것이기 때문에 '중분류'의 <select> 태그에 name속성을 부여하였습니다.

 

추가한 태그들에 css 설정을 추가해주기 위해 'adminProduct.css'파일에 아래의 코드를 추가해줍니다.

.form_section_content select {		/* 카테고리 css 설정 */
    width: 50%;
    height: 35px;
    font-size: 20px;
    text-align-last: center;
    margin-left: 5px;
}
.cate_wrap span {
    font-weight: 600;
}
.cate_wrap:not(:first-child) {
    margin-top: 20px;
}

이렇게 추가하면 아래 그림과 같이 페이지에 출력됩니다.

2. JSON 데이터 변환

서버로 부터 전달받은 JSON 데이터를 JavaScript가 바로 사용할 수는 없습니다.

JSON 데이터를 JavaScript트로 객체로 변환해주어야 합니다.

 

JavaScript 에서는 JSON 문자열 데이터를 JavaScript 객체로 변환해주는 메서드를 제공하고 있습니다.

JSON.parse()

위의 메서드를 이용하여 "cateList" 속성에 담긴 JSON 데이터를 객체로 변환해주고 'cateList' 변수에 저장합니다.

/* 카테고리 */
let cateList = JSON.parse('${cateList}');

현재의 'cateList' 객체에는 '대분류', '중분류'가 모두 섞여 있는 상태입니다.

이 객체를 각 등급(tier)에 맞게 분류하여 배열에 저장시켰습니다.

각 배열에는 'KIND_NAME', 'KIND_ID', 'CATEPARENT' 변수와 그 값을 가지고 있는 객체가 저장되게 했습니다.

 

6개의 변수를 선언합니다.

let cate1Array = new Array();
let cate2Array = new Array();
		
let cate1Obj = new Object();
let cate2Obj = new Object();
		
let cateSelect1 = $(".cate1");		
let cateSelect2 = $(".cate2");

각 등급에 사용될 배열, 객체입니다.

cateSelect 변수는 <select> 태그에 쉽게 접근하기 위한 변수로 선언하였습니다.

 

더불어 데이터가 정확히 추출 되었는지 확인하기 위해 consle에 cate1 Array 값을 출력시키는 코드 또한 추가하였습니다.

/* 카테고리 배열 초기화 메서드 */
function makeCateArray(obj,array,cateList, tier){
	for(let i = 0; i < cateList.length; i++){
		if(cateList[i].tier === tier){
			obj = new Object();
					
			obj.kind_name = cateList[i].kind_name;
			obj.kind_id = cateList[i].kind_id;
			obj.cateparent = cateList[i].cateparent;
					
			array.push(obj);				
					
		}
	}
$(document).ready(function(){
	console.log(cate1Array);		
});

정상적으로 출력된 걸 확인했습니다. 

 

작성한 메서드를 활용하여 각 tier의 배열을 모두 초기화시켜줍니다.

정확히 출력되는지 확인하기 위해 console.log 메서드 또한 작성하였습니다.

/* 배열 초기화 */
makeCateArray(cate1Obj,cate1Array,cateList,1);
makeCateArray(cate2Obj,cate2Array,cateList,2);				
$(document).ready(function(){
	console.log(cate1Array);
	console.log(cate2Array);
});