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

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

전달받은 JSON 데이터를 활용 카테고리 리스트 <select>, <option> 태그 출력

 저번 포스팅에선 카테고리 리스트의 데이터를  JSON형식으로 서버에서 뷰(view)로 전송까지 하였습니다. 이번 포스팅에선 전송받은 JSON형식의 String 데이터를 활용하여 사용자가 선택을 할 수 있는 <select>, <option> 태그가 출력되도록 하는 것이 목표입니다.

 

 

 

순서

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

2. JSON 데이터 변환

 

 

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

  카테고리를 출력시킬 기본적인 틀로서 <select>,<option>태그를 추가하겠습니다. '책 카테고리'에 있던 기존의 <input> 태그를 지우고 아래의 코드를 삽입합니다.

 

			<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">
					<option selected value="none">선택</option>
				</select>
			</div>
			<div class="cate_wrap">
				<span>소분류</span>
				<select class="cate3" name="cateCode">
					<option selected value="none">선택</option>
				</select>
			</div> 

 

그림 1-1

 

 사용자가 '대분류'를 선택하게 되면 그에맞는 '중분류' <option>이 세팅이 되고, '중분류'를 선택하면 그에 맞는 '소분류'의 <option> 태그가 세팅하게 됩니다. 그리고 최종적으로 '소분류'를 선택하는 것은 상품 등록에 필요로 한 "cateCode"데이터를 선택하는 것이기 때문에 '소분류'의 <select> 태그에 name속성을 부여하였습니다.

 

 

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

 

.form_section_content select {		/* 카테고리 css 설정 */
    width: 92%;
    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;
}

 

그림 1-2

 

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

 

 

 

2. JSON 데이터 변환

 서버로 부터 전달받은 JSON 데이터를 Javascript가 바로 사용할 수는 없습니다. JSON 데이터를 Javascript트로 객체로 변환해주어야 합니다.  Javascript 에서는 JSON 문자열 데이터를 Javascript 객체로 변환해주는 메서드를 제공하고 있습니다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

 

JSON.parse()

 

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

 

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

 

 

 현재의 'cateList' 객체에는 '대분류', '중분류', '소분류' 모두 섞여 있는 상태입니다. 이 객체를 각 등급(tier)에 맞게 분류하여 배열에 저장시킬 것입니다. 각 배열에는 'cateName', 'cateCode', 'cateParent' 변수와 그 값을 가지고 있는 객체가 저장될 것입니다. (작가 관리 페이지에서 작가 목록 리스트 데이터를 반환받기  위해 mapper, Service 메서드에서 반환 타입으로 사용했던 "List <AuthorVO>"와 형태가 동일합니다.)

 

그림 2-2

 

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

 

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

 

그림 2-3

 

 - 각 등급에 사용될 배열, 객체입니다. cateSelect 변수는 <select> 태그에 쉽게 접근하기 위해 변수로 선언하였습니다.

 

 

 먼저 'cateList'의 데이터 중 "tire"가 1인 데이터들만 꺼내서 cate1Array 변수에 저장 시키도록 아래의 코드를 작성하였습니다. 더불어 데이터가 정확히 추출 되었는지 확인하기 위해 consle에 cate1Array 값을 출력시키는 코드 또한 추가하였습니다. 

 

	for(let i = 0; i < cateList.length; i++){
		if(cateList[i].tier === 1){
			cate1Obj = new Object();
			
			cate1Obj.cateName = cateList[i].cateName;
			cate1Obj.cateCode = cateList[i].cateCode;
			cate1Obj.cateParent = cateList[i].cateParent;
			
			cate1Array.push(cate1Obj);				
			
		}
	}	

	$(document).ready(function(){
		console.log(cate1Array);
	});

 

 

그림 2-5

 

 정상적으로 출력된 걸 확인하였습니다. 이러한 동일한 형태의 for문을 2번 더 해야 하는데 형태가 동일합니다. 따라서 해당 for문을 재사용할 수 있도록 메서드화 하였습니다. 

 

		/* 카테고리 배열 초기화 메서드 */
		function makeCateArray(obj,array,cateList, tier){
			for(let i = 0; i < cateList.length; i++){
				if(cateList[i].tier === tier){
					obj = new Object();
					
					obj.cateName = cateList[i].cateName;
					obj.cateCode = cateList[i].cateCode;
					obj.cateParent = cateList[i].cateParent;
					
					array.push(obj);				
					
				}
			}
		}	

 

그림 2-6

 

 작성한 메서드를 활용하여 각 tier의 배열을 모두 초기화시켜줍니다. 정확히 출력되는지 확인하기 위해 console.log 메서드 또한 작성하였습니다.

 

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

 

그림 2-7

 

그림 2-8

 

그림 2-9

 

그림 2-10

 

 글 길이가 어중간하여 다음 포스팅에서 마무리하겠습니다.

 

 

 

REFERENCE

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

DATE

• 2020.03.31