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
'Language > 자바스크립트' 카테고리의 다른 글
JS 메모 (0) | 2023.11.06 |
---|---|
[Javascript] 비동기, Promise, async, await 확실하게 이해하기 (0) | 2023.09.11 |
10. JSON.stringify. JSON.parse 사용 방법 (0) | 2021.09.30 |
9. 자바스크립트 자주 쓰이는 간단한 이벤트 모음 (0) | 2021.09.16 |
8. 자바스크립트 널 값 확인하기 (0) | 2021.09.08 |