FormData의 데이터 확인하기

'FormData'객체를 사용해 HTML 폼 데이터를 받아오는 경우 'console.log'로 직접 확인하기 어렵다.
그래서 FormData를 확인할 수 있는 3가지 방법 정리!

1. 'FormData' 객체 순회하면서 데이터 확인

var formData = new FormData(document.getElementById('myForm'));

//FormData 객체를 순회하면서 데이터 확인
formData.forEach(function(value, key){
    console.log(key, value);
});

2. 'FormData' 객체를 JSON 형태로 변환하여 확인

// 폼 요소로부터 FormData 객체 생성
var formData = new FormData(document.getElementById('myForm'));

// FormData 객체를 JSON 형태로 변환
var formDataJSON = {};
formData.forEach(function(value, key){
    formDataJSON[key] = value;
});

// JSON 데이터를 콘솔에 출력
console.log(formDataJSON);

3. 'FormData'객체를 직접 루프로 돌면서 확인

// 폼 요소로부터 FormData 객체 생성
var formData = new FormData(document.getElementById('myForm'));

// FormData 객체를 직접 확인
for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}