자바 스크립트를 사용하여 양식의 동적 목록 객체를 JSON으로 변환

Question

양식 입력을 JSON으로 변환하고 ajax를 사용하여 제출하는 양식 제출 스크립트가 있습니다. 이전에 사용했던 간단한 양식에서 작동하지만 목록에 사용할 때 올바르게 읽지 않습니다.

양식 안에는 다른 스크립트에 의해 생성 된 입력의 동적 목록이 있습니다. 목록의 항목은 다음과 같이 :

<li><input type="checkbox" name="skill_list[]" value="10155"></li> 

형태는 다음과 같습니다 읽는 기능 : 제출 버튼에 대한 이벤트 리스너 내부

var formToJSON = elements => [].reduce.call(elements, (data, element) => { 

    data[element.name] = element.value; 
    return data; 

}, {}); 

, 함수가 호출됩니다

var data = formToJSON(this.elements); 

마지막으로 제출 전에 데이터가 문자열로 표시됩니다.

var data = JSON.stringify(data); 

formToJSON 함수에서 오류가 발생합니다. 이름이 skill_list이고 값이 {10155, 10288, 10240} 인 개체를 만드는 대신 skill_list []라는 이름의 개체를 만들고 그 값은 목록의 첫 번째 값이 무엇이든간에 값입니다.

나는 목록을 인식하기 위해 함수를 다시 작성하려고했지만 제대로 수행 할 수 없었고 아이디어가 부족합니다. 누군가가 나를 올바른 방향으로 안내하도록 도울 수 있습니까?

추신. 나는 jQuery없이이 글을 쓰고 싶다.

Answer 1

:

var formToJSON = elements => [].reduce.call(elements, (data, element) => { 
    var isArray = element.name.endsWith('[]'); 
    var name = element.name.replace('[]', ''); 

    data[name] = isArray ? (data[name] || []).concat(element.value) : element.value; 
    return data; 
}, {}); 

Answer 2

당신이 JSON 객체로 양식 데이터를 변환 할 경우, 시도 별도로 요소의 배열을 처리해야 다음

var formData = JSON.parse(JSON.stringify($('#frm').serializeArray()));