[JQuery] serializeObject 미동작 해결 방법

가끔가다가 serializeObject 가 제대로 동작하지 않는 이슈가 있었습니다.

아마도 태그가 제대로 안 닫혔거나 name이 제대로 없거나 하는 오류가 존재했던 것 같은데 어떨 땐 되고 어떨 땐 안 되는 게 이상합니다.

serializeObject 가 제대로 동작하지 않을 땐, serializeArray로 form을 리스트로 가져온 후 Object로 만들어주었습니다.

 

var list = [];
var obj = {};
var cnt = 0;

var array = $("#form").serializeArray();

array.forEach(function(data, idx){
    if(data.name.split('.')[0].indexOf(cnt) == -1){
        list.push(obj);
        obj = {}; // 초기화
        cnt++;
    }
    obj[data.name.split('.')[1]] = data.value;
    
    // 마지막 obj list에 추가
    if((array.length - 1) == idx){
        list.push(obj);
        obj = {}; // 초기화
        cnt = 0;
    }
});

var json = JSON.stringify(list);

 

근데 또 어떨 때는 serializeArray 가 동작 안 하고 serializeObject는 동작합니다. 이유를 알 수가 없습니다.

그래서 object를 가져오지 못하면 리스트로 작업하게끔 조건을 하나 추가했습니다.

최종 ver

var form = $("#form").serializeObject();
		
if(Object.keys(form).length > 0){
    if(form != undefined){
        buttons = JSON.stringify(form);
    }
}else{
    var list = [];
    var obj = {};
    var cnt = 0;

    var array = $("#form").serializeArray();
    if(array.length > 0){
        array.forEach(function(data, idx){
            if(data.name.split('.')[0].indexOf(cnt) == -1){
                list.push(obj);
                obj = {}; // 초기화
                cnt++;
            }
            obj[data.name.split('.')[1]] = data.value;

            // 마지막 obj list에 추가
            if((array.length - 1) == idx){
                list.push(obj);
                obj = {}; // 초기화
                cnt = 0;
            }
        });

        var json = JSON.stringify(list);
    }
}