[jQuery] serializeObject

제이쿼리에서는 serialize()나 serializeArray() 메소드로 form 내용물을 스트링이나 배열로 변환할 수 있다. 근데 아쉽게도 form 데이터를 json으로 변환하는 메소드는 없다. 이 정돈 기본 메소드로 지원할 법한데 왜 없을까.. 아무튼 찾아보니 당연하게도 관련 플러그인이 있었다.

https://plugins.jquery.com/serializeObject/

jQuery serializeObject | jQuery Plugin Registry

$('form').serializeObject(); 같은 형식으로 사용할 수 있다.

나는 여기에 checkbox에 대해서 true/false로 표시한 값이 필요해서 아래와 같이 살짝 수정해서 사용했다.

jQuery.fn.serializeObject = function () {
    let result = {};
    jQuery.each(this.serializeArray(), function (i, element) {
        let node = result[element.name];
        if (typeof node !== 'undefined' && node !== null) {
            if (jQuery.isArray(node)) {
                node.push(element.value);
            } else {
                result[element.name] = [node, element.value];
            }
        } else {
            result[element.name] = element.value;
        }
    });
    jQuery.each(this.find('input[type=checkbox]'), function (i, element) {
        result[element.name] = $(element).prop('checked');
    });
    return result;
};

요즘은 기존에 제이쿼리를 사용한 코드를 바닐라 자바스크립트로 바꾸는 공부를 하고 있어서 serializeObject 대신 URLSearchParams, FormData, Object.fromEntries 쪽을 보고 있다.