본문으로 바로가기
728x90
반응형
SMALL

Object.fromEntries(Target) 를 잘 사용해보자

 

 

서버 요구 스펙

	@PostMapping("/{tid}")
	public ResponseEntity<Long>addSubTask(@RequestBody List<SubTaskDTO> subTaskMap){
		log.info("--------------- addSubTask ---------------");
		log.info("subTaskDTO: " + subTaskMap);
		
		//service.register(subTaskMap);
		
		return new ResponseEntity<>(HttpStatus.OK);
	}

SubTaskDTO

@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class SubTaskDTO {

	private Long sid;

	private Long tid;

	@NotEmpty(message = "제목은 빈값 일 수 없습니다.")
	@NotNull(message = "제목는 Null 일 수 없습니다.")
	private String subTitle;
	
	private String subContents;
	
	@NotEmpty(message = "시작일은 빈값 일 수 없습니다.")
	@NotNull(message = "시작일은 Null 일 수 없습니다.")
	private String subStartDate;
	
	@NotEmpty(message = "종료일은 빈값 일 수 없습니다.")
	@NotNull(message = "종료일은 Null 일 수 없습니다.")
	private String subEndDate;
	
	@Builder.Default
	private float subRealProgress = 0;
	
	private String subReportRegistFlag; 
      ...
    }

 

클라이언트 ajax 코드

       	    	 var tid = document.getElementById('tid').value;
	        var subTitle = document.getElementsByName('subTitle');
	        var subContents = document.getElementsByName('subContents');
	        var subStartDate = document.getElementsByName('subStartDate');
	        var subEndDate = document.getElementsByName('subEndDate');
	        var subRealProgress = document.getElementsByName('subRealProgress');
	        var subReportRegistFlag = document.getElementsByName('subReportRegistFlag');
            
            for(var i=0; i<subTitle.length; i++){
	        	var testMap = new Map();
	        	testMap.set("subTitle",subTitle[i].value );
	        	testMap.set("tid",tid );
	        	testMap.set("subContents",subContents[i].value );
	        	testMap.set("subStartDate",subStartDate[i].value );
	        	testMap.set("subEndDate",subEndDate[i].value );
	        	testMap.set("subRealProgress",subRealProgress[i].value );
	        	testMap.set("subReportRegistFlag",subReportRegistFlag[i].value );
	        	test.push(Object.fromEntries(testMap));
	        }
            
               
			$.ajax({
		            url: '/subtask/'+tid,
		            type: "POST",
		            data: JSON.stringify(test),
		            contentType: "application/json; charset=utf-8",
		            dataType: "text",
		            success: function (result){
		                //self.location.reload();
		            }
		        });

서버에서 요구하는 dto 필드 값을 JS 에서 Map의 키값으로 넣어줬으며

Object.fromEntries 를 사용하여 Map to Array로 변환하여

["subTitle" : "test", "subContents" : "test", ....] , ["subTitle" : "test", "subContents" : "test", ....], ...

위와 같은 List<DTO> 형태로 만들어주어 AJAX로 전달하였다.

 

서버가 잘 받음을 확인할 수 있다.

subTaskDTO: [SubTaskDTO(sid=null, tid=4, subTitle=TEST, subContents=Optional[TEST], subStartDate=2022-05-04T14:15, subEndDate=2022-05-04T14:15, subRealProgress=0.0, subReportRegistFlag=0), SubTaskDTO(sid=null, tid=4, subTitle=ZZZZZ, subContents=Optional[ZZZZZ], subStartDate=2022-05-04T14:15, subEndDate=2022-05-04T14:15, subRealProgress=0.0, subReportRegistFlag=0)]
728x90
반응형
LIST