formData 객체를 확인하는 방법

 

 

form 데이터를 콘솔로그나 화면에 출력해보면 "[object FormData]” 라고만 출력이 됩니다.
이 내용을 확인하는 방법들에 대한 글입니다.

 

 

# FormData

FormData는 양식 데이터의 키-값 쌍을 저장하는 데 사용되는 JavaScript의 개체입니다.
get 메소드를 사용하고 검색하려는 값의 키를 전달하여 FormData 객체의 내용에 액세스할 수 있습니다.

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

console.log(formData.get('key1')); // 출력 'value1'
console.log(formData.get('key2')); // 출력 'value2'

 

 

# FormData 반복하여 접근하는 방법

forEach 메서드를 사용하여 FormData 객체의 모든 키-값 쌍을 반복할 수도 있습니다.

formData.forEach((value, key) => {
  console.log(key, value);
});

 

출력 결과

key1 value1
key2 value2

이러한 방식으로 출력을 하게되면 콘솔 로그에 한줄씩 내용이 표시되게 됩니다.

 

 

※ 한번에 모두 보고싶다면

FormData 객체의 키-값 쌍을 포함하는 이터레이터를 반환하는 entries 메소드를 사용하여 FormData 객체의 내용을 객체 형태로 볼 수 있습니다. 

그런 다음 Object.fromEntries 함수를 사용하여 반복자를 객체로 변환할 수 있습니다.

예를들면 다음과 같습니다.

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

let formDataObject = Object.fromEntries(formData.entries());
console.log(formDataObject); // 출력: {key1: 'value1', key2: 'value2'}

 

 

 

# Object.entries()

 

Object.entries()주어진 객체의 열거 가능한 속성 [키, 값] 쌍의 배열을 반환하는 JavaScript의 메서드입니다. 

객체의 키-값 쌍을 배열 형식으로 가져오는 데 사용됩니다. 

예를 들면 다음과 같습니다.

let obj = {name: "John", age: 30, city: "New York"};
let entries = Object.entries(obj);
console.log(entries);

 

출력 결과

[["name", "John"], ["age", 30], ["city", "New York"]]

 

 

 

# Object.fromEntries()

 

Object.fromEntries()키-값 쌍의 배열에서 생성된 객체를 반환하는 JavaScript의 메서드입니다.

키-값 쌍의 배열에서 객체를 생성하는 데 사용됩니다.

예를 들면 다음과 같습니다.

let arr = [["name", "John"], ["age", 30], ["city", "New York"]];
let obj = Object.fromEntries(arr);
console.log(obj);

 

출력 결과

{name: "John", age: 30, city: "New York"}