반응형
// 테스트 html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 데이터를 JSON으로 변환</title>
</head>
<body>
<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age" required><br>
<button type="button" onclick="convertToJson()">JSON으로 변환</button>
</form>
</body>
</html>
1. json -> form
<script>
function convertToJson() {
// FormData 객체를 사용하여 폼 데이터 가져오기
var formData = new FormData($("#myForm")[0]);
// JSON 객체 생성
var jsonObject = {};
// FormData를 JSON으로 변환
formData.forEach(function(value, key){
jsonObject[key] = value;
});
// JSON 출력 또는 전송 등의 작업 수행
console.log(JSON.stringify(jsonObject));
}
</script>
form 데이터를 forEach 문으로 돌려서 json에 넣어 주었다.
결과는 아래와 같이 나온다.
{
"name": "John",
"email": "john@example.com",
"age": "25"
}
2. json -> form
// 가상의 JSON 데이터 예시
var jsonData = {
name: "John Doe",
email: "john@example.com",
age: 25
};
// JSON 데이터를 폼에 설정
$.each(jsonData, function(key, value) {
$('form#detail [name=' + key + ']').val(value);
});
마찬가지로 json을 for문으로 돌려서 form 값을 넣어 주었다.
1개씩 넣어주려면 아래와 같이 사용하면 된다.
// 폼 내의 각 입력 요소에 JSON 데이터 값을 설정
$('form#detail [name=name]').val(jsonData.name);
$('form#detail [name=email]').val(jsonData.email);
$('form#detail [name=age]').val(jsonData.age);
반응형
'개발 > FRONT' 카테고리의 다른 글
| vue 라이프 사이클에 대하여 (0) | 2024.01.14 |
|---|---|
| NPM이란? (0) | 2024.01.13 |
| data attribute와 dataset (0) | 2024.01.07 |
| ES2015+(async, await) (0) | 2024.01.07 |
| ES2015+(Promise) (0) | 2024.01.07 |