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

Key Takeaways

1. FormData 및 Object.fromEntries()는 폼에서 JSON을 빠르게 가져오는 방법을 제공합니다.
2. getAll() 또는 수동 루프를 사용하여 이름이 같은 여러 필드를 처리합니다.
3. 서버로 보내기 전에 항상 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는 간단한 폼에 대한 간결한 솔루션을 제공하는 반면, 수동 반복은 복잡한 폼에 대한 더 큰 유연성을 제공합니다.

FAQs

FormData가 체크박스 및 다중 선택 입력을 처리할 수 있습니까?

예, 하지만 선택한 모든 값을 수집하려면 getAll()을 사용하거나 수동으로 루프해야 합니다.

JSON 출력에서 선택되지 않은 체크박스는 어떻게 됩니까?

선택되지 않은 체크박스는 FormData에 포함되지 않습니다. 필요한 경우 명시적으로 처리하십시오.

이 방법은 파일 업로드와 호환됩니까?

FormData에는 파일 객체가 포함되지만 JSON과 별도로 처리해야 합니다.

Leapcell은 백엔드 프로젝트 호스팅을 위한 최고의 선택입니다.

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발하십시오.

무제한 프로젝트를 무료로 배포

• 사용량에 대해서만 비용을 지불합니다. 요청도 없고 요금도 없습니다.

탁월한 비용 효율성

• 유휴 요금 없이 사용한 만큼만 지불하십시오.
• 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

손쉬운 확장성 및 고성능

• 고도의 동시성을 쉽게 처리하기 위한 자동 확장.
• 운영 오버헤드가 전혀 없습니다. 구축에만 집중하십시오.

설명서에서 자세히 알아보십시오!

X에서 팔로우하세요: @LeapcellHQ