JSON Array를 컨트롤러로 보내기

문제상황

1. 드래그할수있는 div요소들이 있다. 이 요소들의 갯수는 크기별로 입력받아놓은것이라서 동적으로 변함
2. 드래그앤 드랍으로 div들의 위치를 바꾼 후 해당 좌석들의 dataset(TT0,FT5..)과 좌표값을 저장한뒤 해당 데이터를 AJAX통신으로 컨트롤러에 보내주려고 함!
3. 문제점은 각 좌표를 뜻하는 키값은 모두 sitX, sitY이고 좌석ID도 sitId로 동일한데... JSON에서 키값을 겹쳐서 보내도 되는가??? 그럼 컨트롤러에서 어떻게 받아야하지? 하는 고민이였다.

---

Solve

정답은 그냥 '배열로 보내면 된다!' 이다

뭐 이런식으로 데이터가 들어오면 됨... 제일 처음에 빈 Array를 선언한 뒤 각 div를 순회하며 데이터를 배열에 push해주면 된다.

	let seatInfo = [];
	
	var seatId = 'D';
	var x = $('#door').position().top;
	var y = $('#door').position().left;
	seatInfo.push({sitId : seatId, sitX : x, sitY : y});
	
	var t2s = document.getElementsByClassName('t2');
		for(var i=0; i<t2s.length; i++){
			var seatId = t2s[i].dataset.seat;
			var x = $('#'+seatId).position().top;
			var y = $('#'+seatId).position().left;
			seatInfo.push({sitId : seatId, sitX : x, sitY : y});
		}		
	var t4s = document.getElementsByClassName('t4');
		for(var i=0; i<t4s.length; i++){
			var seatId = t4s[i].dataset.seat;
			var x = $('#'+seatId).position().top;
			var y = $('#'+seatId).position().left;
			seatInfo.push({sitId : seatId, sitX : x, sitY : y});
		}	
	var t8s = document.getElementsByClassName('t8');
		for(var i=0; i<t8s.length; i++){
			var seatId = t8s[i].dataset.seat;
			var x = $('#'+seatId).position().top;
			var y = $('#'+seatId).position().left;
			seatInfo.push({sitId : seatId, sitX : x, sitY : y});
		}	
	for(let i=0; i<seatInfo.length; i++){
		console.log(seatInfo[i]);
	}

리팩토링이 필요한 코드지만... 혀튼 간단히 보면 이렇고 이걸 실행하면

이런식으로 들어오는걸 볼 수 있당...

그럼 이제 이걸 JSON으로 바꾸어서 AJAX 통신해보자

https://granya.tistory.com/10

여기를 참고했다
json-simple이라는 라이브러리를 사용했다!!

AJAX로는 다음과같이 보냈고

 	$.ajax({
		type:'post',
		url: '/CelebBack/fr/info/seat/seatForm',
		headers:{
			"Content-Type" : "application/json",
			"X-HTTP-Method-Override" : "POST"
		},
		dataType:'text',
		data : JSON.stringify(seatInfo),
		success: function(result){
			if(result=='success'){
				alert('DB저장 성공')
			}
		}
	});

seatInfo라는 JSONArray값은 다음과같이 받는다

	@PostMapping("/seatForm")
	@ResponseBody
	public void seatForm(@RequestBody String data) {
		
		JSONParser jsonParser = new JSONParser();
		JSONArray insertParam = null;
		try {
			insertParam = (JSONArray) jsonParser.parse(data);
		} catch (ParseException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println(insertParam.size());
		for(int i=0; i<insertParam.size(); i++){
			//배열 안에 있는것도 JSON형식 이기 때문에 JSON Object 로 추출            
			JSONObject insertData = (JSONObject) insertParam.get(i);
			System.out.println(insertData);
		}
	}

json을 파싱해야되는거니까 jsonParser를 소환.... JSONArray라는 객체도 만들어두고 이 객체에 파서를 이용해 파싱한 데이터를 넣는다!! 그럼 무사히 값을 꺼낼 수 있게된다.