폼 데이터를 json 데이터로 보내고 싶을 때.

프로그래머가 처음부터 개발을 담당한다면 
이러한 일은 별로 없겠지만 누가 만들고 간 소스, 누가 만들다 만 소스.
만들어진 소스에 커스텀한 소스 등을 맞이 하다 보면 이런 상황이 필요해질 때가 있다.
인터넷에서 검색해보니 JQuery 이미 나와있다.

jQuery.fn.serializeObject = function() { 
  var obj = null; 
  try { 
    if(this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) { 
      var arr = this.serializeArray(); 
      if(arr){ obj = {}; 
        jQuery.each(arr, function() { 
          obj[this.name] = this.value;
        }); 
      } 
    } 
  }catch(e) { 
      alert(e.message); 
  }finally {} 
  return obj; 
}

jquery를 활용하는 환경에서는 문제 없겠지만
최근 React나 Vue 등의 인기있는 프레임워크에서 JQuery를 버리는 추세로 가고 있기에 퓨어하게 만들어보았다.

Object.prototype.FormObject = function (){  
  var obj = null; 
  try {
    if(this.tagName && this.tagName.toUpperCase() == "FORM") {
      var value = this.querySelectorAll("[name]");
      if(value.length > 0) obj = {};
      value.forEach(ele => {
        obj[ele.name] = ele.value;
      }); 
    }
  }catch(e) {
    alert(e.message);
  }finally {}
  return obj;
};

사용 예제는 아래와 같다.

const f = document.getElementById('form').FormObject();
//폼 안에 있는 해당 모든 전송값이 Obeject로 바뀌게 된다.
JSON.stringify(f);
//위와 같이 JSON.stringify를 선언해주면 JSON 문자열 형태로 폼의 값들이 다 바뀌게 된다