2014-12-22 3 views
-2

폼에 테이블이 있고 모든 셀에 사용자 입력 (텍스트 상자, 드롭 다운 목록, 날짜 선택기)이 있습니다.개체 배열에서 JSON 만들기

<tr> 
    <td><input type='text' name='user[0]' /></td> 
    <td><input type='text' name='stuff[0]' /></td> 
<tr> 
    <td><input type='text' name='user[1]' /></td> 
... 
</tr> 

$ .serializeArray()를 호출하면 양식에서 배열을 만듭니다.

배열은이 스키마가있는 객체 배열 { 'name':user[n],'value': 'Joe'}입니다.

모든 배열을 객체로 사용하여이 배열에서 동적으로 객체 배열을 만들고 싶습니다.

스키마를 { name[n] : value [n] }과 같게하고 싶습니다. 예를 들어 html 예제의 JSON은

[{ 
    'user[0]' : 'Joe', 
    'stuff[0]' : 'whatever' 
},{ 
    'user[1]' : 'Marc', 
    'stuff[1]' : 'other stuff' 
}] 

등입니다.

지금까지 시도한 양식 배열 배열을 n 개의 배열로 분할하여 테이블의 각 행에 하나씩 반복했지만, 원하는 JSON을 만드는 방법을 알 수 없습니다.

폼을 제출하여 전체 테이블을 JSON으로 입력하여 동일한 name 입력란에 테이블에 저장하는 웹 서비스에 보내고 싶습니다.

+0

귀하의 속성 이름에 색인이있는 것은 의미가 없습니다. JSON 예제에서 객체는 이미 배열에 있습니다. JSON은''{{ "user": "Joe", "stuff": "whatever"}, { "user": "Marc", "stuff": "other stuff"}]와 같이 보일 것입니다. 그렇게하면 모든 객체가 동일한 속성을 갖게됩니다. – JLRishe

+0

분명히 나는'name'을 다듬을 것이고, 인덱스는 선들을 구분할 것입니다 (?). 행 번호를 기반으로 배열을 나누기를 원하지 않습니다. 양식에 필드를 추가하기가 어려울 것이기 때문입니다. – fra9001

+0

아니요, 속성 이름에 인덱스가 없어야합니다. 일관성이 있어야합니다. ''{ ' "user": "Joe", "stuff": "what", line : 0}, { "user": "Marc"} 속성을 사용하여 줄 번호를 추적하려면, , "stuff": "다른 것들", line : 1}]'. 나는 당신이 "이름을 다듬을"것이라고 말할 때 당신이 의미하는 바를 모른다. – JLRishe

답변

0

다음은 주어진 selector의 자식 인 모든 jQuery :input elements을 찾아서 (DOM 내의 여러 위치에서 사용할 수 있도록) 함수입니다. "지도"를 사용하여 각 입력 항목의 이름/값 항목을 만들고 "축소"하여 쌍으로 병합합니다.

function inputsAsJson(selector) { 
    return $(selector).find(':input').map(function() { 
    var $input=$(this), obj={}; 
    obj[$input.attr('name')] = $input.val(); 
    return obj; 
    }).toArray().reduce(function(memo, _, index, source) { 
    if ((index % 2) == 0) { 
     memo.push($.extend({}, source[index], source[index+1])); 
    } 
    return memo; 
    }, []); 
} 

// Assuming your target element is a "table" with id "foo"... 
inputsAsJson('table#foo') // => [ { "user[0]": "Joe", "stuff[0]": "whatever" }, ... ] 

working JSFiddle here을 참조하십시오.