2013-01-16 78 views
0

如果我的標題是正確的,但我目前有得到JSON字符串化的重複,能形式和其他正常的輸入端,獲取JSON字符串化,所以當克隆是我不安靜肯定點擊第二個輸入被克隆並點擊時提交被我得到了控制檯以下值:JSON對象上合併兩個JSON字符串化值到

{"dependant1":[{"name":"daniel"}],"dependant2":[{"name":"allen"}]} 
{"mainmember":[{"name":"steve"}]} 

我怎樣才能將二者結合起來,以獲得:

{"mainmember": [{"name": "steve"}],"dependant1": [{"name": "daniel"}],"dependant2": [{"name": "allen"}]} 

繼承人的jsfiddle:http://jsfiddle.net/dawidvdh/uhJ7w/

,代碼:

的jQuery:

//Clone Tracking 
var g_counter = 1; 
var d_counter = 1; 
var dependant = ["dependant"]; 
var input_groups = ["group-1"]; 
var group; 
var name_input_groups = ["name-group-1"]; 
var values; 
var name_fields=[0]; 
var name_input = "<input class='name' name='name' type='text' />"; 
jQuery(document).ready(function(e) { 
    jQuery(name_fields).each(function() { 
     jQuery(name_input).appendTo('#name-group-1'); 
    }); 
    jQuery('#clone').click(function() { 
     clone_dependant(); 
    }); 

    function clone_dependant() { 
     var oldId = g_counter; 
     g_counter++; 
     var id_newDiv = 'group-'+ g_counter; 
     currentdep ='dependant-'+g_counter; 
     var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter); 
     var name_newDiv = 'name-group-'+ g_counter; 
     $clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter); 
     $clonedDiv.find('input[type="text"]').val(''); 
     $clonedDiv.insertAfter("#dependant-" + oldId); 
     name_input_groups.push(name_newDiv); 
     input_groups.push(id_newDiv); 
    } 

var result = {}; 
var dependants; 
var mainmember; 
var main_result = {}; 
var dep_counter = 0; 
jQuery('#submit').click(function(){ 
    jQuery('.dependant').each(function(k, v){ 
     dep_counter++ 
     dependants = {}; 
     result['dependant'+dep_counter] = [dependants]; 
     dependants['name'] = $(v).find('.name').val(); 
    }); 
    jQuery('.main-member').each(function(k, v){ 
     mainmember = {} 
     mainmember['name'] = $(v).find('.main_name').val(); 
     main_result['mainmember'] = [mainmember]; 
    }); 
    var jsonData = JSON.stringify(result); 
    var mainData = JSON.stringify(main_result); 

    console.log(jsonData); 
    console.log(mainData); 

    jQuery.ajax({ 
     type: "POST", 
     url: "mail.php", 
     dataType: "json", 
     data: {parameters: jsonData} 
    }); 
}); 
//submit function 
}); 

然後將HTML

<div id="main-member" class="main-member"> 
    <div id="label">full name:</div>    <input class="main_name" /> 
</div> 
<div id="dependant-1" class="dependant"> 
    <div id="label">full name:</div>   <div id="name-group-1"></div> 
</div> 
<button id="clone">Add a Dependant</button> 
<button id="submit">submit</button> 

而且他們要在那裏擁有的每個循環的代碼的其餘工作。

在此先感謝:)。

+0

看,你會喜歡它:) HTTP:// knockoutjs.com/ – whosrdaddy

+1

'$ .extend'方法效果很好,但爲什麼不首先將'mainmember'聲明爲'main_result'對象的'key'? 'result ['mainmember'] = [mainmember];' – Ohgodwhy

回答

0

而是建立兩個獨立的對象只是建立在knockout.js一個

jQuery('.dependant').each(function(k, v){ 
     dep_counter++ 
     dependants = {}; 
     result['dependant'+dep_counter] = [dependants]; 
     dependants['name'] = $(v).find('.name').val(); 
    }); 
    jQuery('.main-member').each(function(k, v){ 
     mainmember = {} 
     mainmember['name'] = $(v).find('.main_name').val(); 
     result['mainmember'] = [mainmember]; 
    }); 

DEMO

+0

精彩,簡單卻令人驚歎:)...非常感謝你 –

+0

嘿,我不知道這是否合適,但你能否看看http://stackoverflow.com/questions/14374324/jquery-clone-able-inputs-foreach-overwrites-values/ –

1

jQuery.extend可以做到這一點,

var theData = $.extend({}, result, main_result, true); 

... 
data: { parameters: JSON.stringify(theData) }, 
... 
1

使用$.extend

var jsonData = JSON.stringify($.extend({}, result, main_result)); 

文檔:

jQuery.extend(target [, object1 ] [, objectN ])

返回:對象

描述:合併兩個或多個對象的內容一起放入第一個對象。


理想情況下,你應該使用一個單一的對象,而不是。

var data = {}; 
jQuery('.dependant').each(function(k, v){ 
    dep_counter++ 
    data['dependant' + dep_counter] = [{ 
     name: $(v).find('.name').val() 
    }]; 
}); 
jQuery('.main-member').each(function(k, v){ 
    data['mainmember'] = [{ 
     name: $(v).find('.main_name').val() 
    }]; 
}); 
... 
jQuery.ajax({ 
    ... 
    data: { parameters: data } 
    ... 
}); 
1

我認爲你正在尋找jQuery的延長

console.log(jsonData); 
console.log(mainData); 

jQuery.ajax({ 
    type: "POST", 
    url: "mail.php", 
    dataType: "json", 
    data: {parameters: jQuery.extend(mainData, jsonData)} 
}); 
3

只要不使用兩個不同的變量resultmain_result,但一個只。

如果你需要他們分開,他們的所有屬性複製到您的字符串化,然後一個新的空對象。您可以使用jQuery.extend爲:

var jsonData = JSON.stringify($.extend({}, result, main_result));