[JavaScript] FormData 객체 Key, Value 값 확인하기 - for..of, forEach

dhkim 9월 01, 2022

 



form 태그와 FormData 객체에 대한 값 확인 부터 기본적인 사용방법에 대해 알아봅니다.



1. form 태그 예제

form 태그 안에 값을 입력받고 확인할 input(text), 콤보박스를 구현한 select태그, CheckBox 태그들로 구성합니다.

[소스코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div>
	<form id="formMain" action="">
		<div style="display: inline-flex; flex-direction: column;">
			<p class="content-1"> Form Area ...</p>
			<input class="content-1" name="txtSample" type="text" value="Smaple Text...">
			<select class="content-1" name="selectBox" id="selectBox">
				<option value="normal">보통</option>
				<option value="Hard">어려움</option>
				<option value="Hell">매우 어려움</option>
			</select>
			<label for="chkBox1">Check Box(1) : 
				<input type="checkbox" id="chkBox1" name="chkBox1" value="Y" checked>
			</label>
			<label for="chkBox2">Check Box(2) : 
				<input type="checkbox" id="chkBox2" name="chkBox2" value="Y">
			</label>
		</div>
	</form>
	
	<button id="btnPrint">Print FormData Info</button>
</div>

[결과화면]



2. form 데이터 입력값 확인

 콘솔에 formData 객체를 추출하는 것 만으로는 내부를 확인할 수 없기에 아래와 같이 반복문으로 key, value 값을 순회하면서 확인합니다.

 이 때, key, value를 명시하여 확인할 수 있는 forEach문을 좀 더 선호합니다.

 더불어, 참고해야할 것은 input 태그 checkbox 타입은 체크되어 "checked" 값을 갖는 태그의 value값만 가져옵니다. (결과란의 chkBox2가 없는 이유)


[소스코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
let formData = new FormData(document.querySelector('#formMain'));
let object = {};


/** forEach 문 사용 */
console.log('1) forEach');
formData.forEach((value, key)=>{

	console.log(`key: ${key}    /    value: ${value}`);
	object[key] = value;

});
console.log(object);


/** for..of 문 사용 */
console.log('2) for ... of');
// for (var p of myFormData.entries()) 와 같은 의미
for(let data of formData){
	console.log(data);
}

[결과화면]

for..of 문에서 출력한 formData 항목은 [0] : key, [1] : value로 구성된 배열로 받습니다.



3. FormData 객체 기본사용법 (1)

 formData 객체가 지원하는 몇 가지 함수들의 사용법을 다룹니다.


  • append : formData에 새로운 key, value 셋을 추가합니다.
  • delete : formData에 지정한 key값의 셋을 삭제합니다.
  • get : 지정한 key값을 갖는 value 값을 가져옵니다.
  • keys : formData 내의 모든 key에 대한 iterator를 반환합니다. 
  • values :  formData 내의 모든 value에 대한 iterator를 반환합니다.


[소스코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
console.log('3) Append ...');    
formData.append('OPTIONS', 'Red');
PrintFormData(formData)


console.log('4) Delete ...(txtSample)');
formData.delete('txtSample');
PrintFormData(formData)


console.log('5) Get ...(OPTIONS)');
console.log(formData.get('OPTIONS'));


console.log('6) Key ...');
for(let key of formData.keys()){
	console.log(key);
}


console.log('7) Values ...');
for(let value of formData.values()){
	console.log(value);
}

[결과화면]




4. formData 객체 기본사용법 (2)


  • getAll : 지정한 key값을 갖는 모든 value값들을 가져옵니다. (배열로 리턴)(formData 내에 동일한 key값을 갖는 원소가 여럿 있을 수 있음.)
  • set : 지정한 key, value 셋을 저장합니다. append와 달리 이미 동일한 key값을 갖는 원소가 존재한다면 set에 지정한 value로 교체합니다.
  • has : 지정한 key값을 갖는 원소가 있는 경우 true, 없다면 false를 리턴합니다.


[소스코드]

 1) getAll을 구현하기 위해 기존에 있는 'OPTIONS' key의 셋을 append함.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
console.log('8) Append & GetAll ...(OPTIONS)');
formData.append('OPTIONS', 'Blue');     // 동일 Key값을 Append한 경우 복수개 배열이됨.
console.log(formData.getAll('OPTIONS'));


console.log('9) Set ...');
formData.set('OPTIONS', 'Black');       // 동일 Key값을 Set한 경우 덮어씌움.
formData.set('ANY_OPTIONS', 'White');   // 새로운 Key값을 Set한 경우 새로운 key,value가 생성됨.
PrintFormData(formData);


console.log('10) Has ...');
console.log(formData.has('OPTIONS'));
console.log(formData.has('SOME_OPTIONS'));

[결과화면]

 8번 예제에서 복수개인 'OPTIONS' key가 9번 예제에서 set명령어를 통해 대체되었음을 확인



5. 예제코드

[HTML]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <style>
        .content-1{
            margin: 5px;
        }

    </style>
</head>
<body>
    <div>
        <h1>
            FormData Excercise ...
        </h1>
        
        <div>
            <form id="formMain" action="">
                <div style="display: inline-flex; flex-direction: column;">
                    <p class="content-1"> Form Area ...</p>
                    <input class="content-1" name="txtSample" type="text" value="Smaple Text...">
                    <select class="content-1" name="selectBox" id="selectBox">
                        <option value="normal">보통</option>
                        <option value="Hard">어려움</option>
                        <option value="Hell">매우 어려움</option>
                    </select>
                    <label for="chkBox1">Check Box(1) : 
                        <input type="checkbox" id="chkBox1" name="chkBox1" value="Y" checked>
                    </label>
                    <label for="chkBox2">Check Box(2) : 
                        <input type="checkbox" id="chkBox2" name="chkBox2" value="Y">
                    </label>
                </div>
            </form>
            
            <button id="btnPrint">Print FormData Info</button>
        </div>
    </div>

    <script src="./ex_formData.js"></script>
</body>
</html>


[JavaScript]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
(()=>{
    FormAction();
    AddEvent();
})();

function FormAction(){

    let formData = new FormData(document.querySelector('#formMain'));
    let object = {};

    
    /** forEach 문 사용 */
    console.log('1) forEach');
    formData.forEach((value, key)=>{

        console.log(`key: ${key}    /    value: ${value}`);
        object[key] = value;

    });
    console.log(object);
    

    /** for..of 문 사용 */
    console.log('2) for ... of');
    // for (var p of myFormData.entries()) 와 같은 의미
    for(let data of formData){
        console.log(data);
    }


    console.log('3) Append ...');    
    formData.append('OPTIONS', 'Red');
    PrintFormData(formData)
    

    console.log('4) Delete ...(txtSample)');
    formData.delete('txtSample');
    PrintFormData(formData)


    console.log('5) Get ...(OPTIONS)');
    console.log(formData.get('OPTIONS'));


    console.log('6) Key ...');
    for(let key of formData.keys()){
        console.log(key);
    }


    console.log('7) Values ...');
    for(let value of formData.values()){
        console.log(value);
    }


    console.log('8) Append & GetAll ...(OPTIONS)');
    formData.append('OPTIONS', 'Blue');     // 동일 Key값을 Append한 경우 복수개 배열이됨.
    PrintFormData(formData);
    

    console.log('9) Set ...');
    formData.set('OPTIONS', 'Black');       // 동일 Key값을 Set한 경우 덮어씌움.
    formData.set('ANY_OPTIONS', 'White');   // 새로운 Key값을 Set한 경우 새로운 key,value가 생성됨.
    PrintFormData(formData);


    console.log('10) Has ...');
    console.log(formData.has('OPTIONS'));
    console.log(formData.has('SOME_OPTIONS'));


}


function PrintFormData(formData){

    let form = formData ?? new FormData(document.querySelector('#formMain'));

    console.log('============== Print ==============');
    
    form.forEach((value, key)=>{
        console.log(`key: ${key}    /    value: ${value}`);
    });

}

function AddEvent(){
    document.getElementById("btnPrint").addEventListener("click", ()=>{
        event.preventDefault();
        // console.log('Print Button Click...');
        PrintFormData();
    });
}

0 댓글