JavaScript를 사용하여 HTML 폼 데이터를 JSON으로 변환하는 방법

Key Takeaways

FormData 및 Object.fromEntries()는 폼에서 JSON을 빠르게 가져오는 방법을 제공합니다.
getAll() 또는 수동 루프를 사용하여 이름이 같은 여러 필드를 처리합니다.
서버로 보내기 전에 항상 JSON을 검증하고 처리하십시오.

HTML 폼 데이터를 JSON 형식으로 변환하는 것은 웹 개발에서 흔한 작업입니다. 특히 API와 상호 작용하거나 데이터를 로컬에 저장할 때 그렇습니다. 이 가이드에서는 JavaScript를 사용하여 이를 달성하는 다양한 방법을 안내합니다.

폼 데이터를 JSON으로 변환하는 이유?

API 통합: 많은 최신 API가 JSON 형식으로 데이터를 허용합니다.
데이터 저장: JSON은 구조화된 데이터를 저장하는 데 이상적인 경량 형식입니다.
일관성: JSON을 사용하면 애플리케이션의 여러 부분에서 균일성을 보장할 수 있습니다.

방법 1: `FormData` 및 `Object.fromEntries()` 사용

FormData API는 폼 데이터를 캡처하는 편리한 방법을 제공합니다. Object.fromEntries()와 함께 사용하면 이 데이터를 JSON 객체로 쉽게 변환할 수 있습니다.

예시:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault(); // 기본 폼 제출 방지

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    console.log(jsonData);
    // JSON 문자열로 변환:
    // console.log(JSON.stringify(jsonData));
  });
</script>

참고: 이 방법은 간단한 폼에는 잘 작동하지만 이름이 같은 여러 입력(예: 체크박스)을 예상대로 처리하지 못할 수 있습니다.

방법 2: 이름이 같은 여러 입력 처리

체크박스 또는 다중 선택 필드와 같이 여러 입력이 동일한 이름을 공유하는 폼 요소의 경우 FormData.getAll()을 사용하여 모든 값을 검색할 수 있습니다.

예시:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Topics:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    // 다중 선택 처리
    jsonData.topics = formData.getAll('topics');

    console.log(jsonData);
  });
</script>

출력 예시:

{
  "name": "Alice",
  "email": "alice@example.com",
  "topics": ["JavaScript", "CSS"]
}

방법 3: `forEach()`를 사용한 수동 변환

변환 프로세스를 더 자세히 제어하려면 FormData 항목을 수동으로 반복할 수 있습니다.

예시:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Topics:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = {};

    formData.forEach((value, key) => {
      if (jsonData.hasOwnProperty(key)) {
        // 키가 이미 존재하는 경우 배열로 변환하거나 기존 배열에 추가합니다.
        jsonData[key] = [].concat(jsonData[key], value);
      } else {
        jsonData[key] = value;
      }
    });

    console.log(jsonData);
  });
</script>

이 접근 방식은 동일한 키에 대한 여러 값이 올바르게 캡처되도록 합니다.

추가 고려 사항

체크박스 값: 체크박스가 선택되면 해당 값이 포함됩니다. 그렇지 않으면 생략됩니다. 필요한 경우 선택되지 않은 체크박스를 처리해야 합니다.
파일 입력: FormData는 파일 입력을 File 객체로 캡처합니다. 파일 업로드를 별도로 처리해야 할 수 있습니다.
유효성 검사: 데이터를 처리하거나 서버로 보내기 전에 항상 폼 데이터의 유효성을 검사하십시오.

결론

JavaScript에서 HTML 폼 데이터를 JSON으로 변환하는 것은 다양한 방법을 통해 수행할 수 있으며, 각 방법은 다양한 시나리오에 적합합니다. Object.fromEntries()와 결합된 FormData API는 간단한 폼에 대한 간결한 솔루션을 제공하는 반면, 수동 반복은 복잡한 폼에 대한 더 큰 유연성을 제공합니다.