jQuery.serialize() डेटा को JSON ऑब्जेक्ट में कैसे परिवर्तित करें?

Question

क्या फ़ॉर्म फ़ंक्शन को कनवर्ट करने के लिए कोई बेहतर समाधान है जो पहले से ही jQuery फ़ंक्शन serialize() द्वारा क्रमबद्ध है, जब फ़ॉर्म में एकाधिक इनपुट ऐरे फ़ील्ड होते हैं। मैं कुछ अन्य सूचनात्मक तालिकाओं को फिर से बनाने के लिए फॉर्म डेटा को JSON ऑब्जेक्ट में रूपांतरित करने में सक्षम होना चाहता हूं। तो मुझे जेएसओएन ऑब्जेक्ट के रूप में परिवर्तित क्रमबद्ध स्ट्रिंग प्राप्त करने का एक बेहतर तरीका बताएं।

<form id='sampleform'> 
    <input name='MyName' type='text' /> // Raf 

    <!--array input fields below--> 
    <input name='friendname[]' type='text' /> // Bily 
    <input name='fiendemail[]' type='text' /> // bily@someemail.com 

    <!--duplicated fields below to add more friends --> 
    <input name='friendname[]' type='text' /> // Andy 
    <input name='fiendemail[]' type='text' /> // Andy@somwhere.com 

    <input name='friendname[]' type='text' /> // Adam 
    <input name='fiendemail[]' type='text' /> // Adam@herenthere.com 
</form> 

jQuery विधि कैसे मैं एक JSON ऑब्जेक्ट के लिए इस डेटा कर सकता हूँ डेटा

var MyForm = $("#sampleform").serialize(); 
/** result : MyName=Raf&friendname[]=Billy&fiendemail[]=bily@someemail.com&friendname[]=Andy&fiendemail[]=Andy@somwhere.com&friendname[]=Adam&fiendemail[]=Adam@herenthere.com 
*/ 

प्राप्त करने के लिए आवेदन किया है? जिसमें उपरोक्त फॉर्म से JSON डेटा निम्न उदाहरण होना चाहिए।

{ 
    "MyName":"raf", 
    "friendname":[ 
     {"0":"Bily"}, 
     {"1":"Andy"}, 
     {"2":"Adam"} 
    ], 
    "friendemail":[ 
     {"0":"bily@someemail.com"}, 
     {"1":"Andy@somwhere.com"}, 
     {"2":"Adam@herenthere.com"} 
    ] 
} 

Answer 1

मुझे हाल ही में यह सही समस्या है। प्रारंभ में, हम jQuery की serializeArray() विधि का उपयोग कर रहे थे, लेकिन इसमें अक्षम तत्व शामिल नहीं हैं। हम प्रायः फॉर्म तत्वों को अक्षम कर देंगे जो पृष्ठ पर अन्य स्रोतों के लिए "सिंक'd" हैं, लेकिन हमें अभी भी हमारे क्रमबद्ध ऑब्जेक्ट में डेटा शामिल करने की आवश्यकता है। तो serializeArray() बाहर है। हमने किसी दिए गए कंटेनर में सभी इनपुट तत्व (सक्षम और अक्षम दोनों) प्राप्त करने के लिए :input चयनकर्ता का उपयोग किया, और फिर हमारी ऑब्जेक्ट बनाने के लिए $.map() का उपयोग किया।

var inputs = $("#container :input"); 
var obj = $.map(inputs, function(n, i) 
{ 
    var o = {}; 
    o[n.name] = $(n).val(); 
    return o; 
}); 
console.log(obj); 

ध्यान दें कि यह काम करने के लिए, आपके इनपुट के प्रत्येक एक name विशेषता है, जो परिणामस्वरूप वस्तु की संपत्ति का नाम होगा की आवश्यकता होगी।

यह वास्तव में हमारे द्वारा उपयोग किए जाने वाले कार्यों से थोड़ा संशोधित है। हम एक उद्देश्य यह है कि एक .NET IDictionary के रूप में संरचित किया गया था बनाने के लिए आवश्यक है, तो हम इस प्रयोग किया है:

var obj = $.map(inputs, function(n, i) 
{ 
    return { Key: n.name, Value: $(n).val() }; 
}); 
console.log(obj); 

मैं इन समाधानों में से दोनों की तरह (मैं मामले यह उपयोगी है में यहाँ इसे प्रदान), क्योंकि वे के सरल प्रयोग हैं $.map() फ़ंक्शन, और आपके पास अपने चयनकर्ता पर पूर्ण नियंत्रण है (इसलिए, आप अपने परिणामस्वरूप ऑब्जेक्ट में कौन से तत्वों को समाप्त करते हैं)। इसके अलावा, कोई अतिरिक्त प्लगइन की आवश्यकता है। सादा पुराना jQuery।

Answer 2

मैं इस बहुत कम jQuery प्लगइन का उपयोग कर रहा हूँ, कि मैं DocumentCloud से बढ़ाया गया है:

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

यह मूल रूप से कोड की दो पंक्तियाँ है, लेकिन यह _.js की आवश्यकता है (Underscore.js) , क्योंकि यह reduce फ़ंक्शन पर आधारित है।

$.fn.extend({ 
    serializeJSON: function(exclude) { 
    exclude || (exclude = []); 
    return _.reduce(this.serializeArray(), function(hash, pair) { 
     pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value); 
     return hash; 
    }, {}); 
    } 
}); 

एक्सटेंशन:

• यह अगर यह शून्य है एक इनपुट मूल्य को क्रमानुसार नहीं है
• यह exclude तर्क i.e. ["password_confirm"]

के लिए इनपुट नाम की एक सरणी पारित करके कुछ आदानों बाहर कर सकते हैं

Answer 3

अंडरस्कोर & jQuery

का उपयोग करना 210

var formdata = $("#myform").serializeArray(); 
var data = {}; 
_.each(formdata, function(element){ 
// Return all of the values of the object's properties. 
    var value = _.values(element); 
// name : value 
    data[value[0]] = value[1]; 
}); 
console.log(data); //Example => {name:"alex",lastname:"amador"} 

Answer 4

jQuery.serializeJSON प्लगइन का उपयोग करें। यह एक समान प्रारूप का उपयोग करके रूपों को रूपांतरित करता है जैसा कि आप रेल परम ऑब्जेक्ट में पाएंगे, जो कि बहुत मानक और अच्छी तरह से परीक्षण किया जाता है।

Answer 5

var formdata = $("#myform").serializeArray(); 
var data = {}; 
$(formdata).each(function(index, obj){ 
    data[obj.name] = obj.value; 
}); 

सरल और तेजी से;)

Answer 6

Danilo Colasso's को एक बराबर समाधान, sames पेशेवरों और .serializeArray() के विपक्ष के साथ (मूल रूप से यह .reduce बजाय $.each) का उपयोग करता है।

कम प्रयास के साथ यह एक्सटेंशन की आवश्यकता के बिना एससी के उत्तरों में अतिरिक्त सुविधाओं को लागू करने की अनुमति देता है।

$(selector).serializeArray() 
    .reduce(function(accum, item) { 
     // This 'if' allows ignoring some values 
     if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) { 
      // This allows ignoring NULL values 
      if (item.value !== null) { 
       accum[item.name] = item.value; 
      } 
     } 
     return accum; 
    }, 
    { 
     // By supplying some initial values, we can add defaults 
     // for, say, disabled form controls. 
     preFilledName: preFilledValue, // optional 
     defaultName : defaultValue // optional 
    } 
); 

Answer 7

var formdata = $("#myform").serializeArray(); 

var data = {}; 

$(formdata).each(function(index, obj){ 

     if(data[obj.name] === undefined) 
       data[obj.name] = []; 

      data[obj.name].push(obj.value); 

}); 

Answer 8

मुझे लगता है कि अच्छा जवाब का एक बहुत उपस्थित हैं, और मैं इन उत्तरों के आधार पर अपने खुद के समारोह बना दिया।

function formToJSON(f) { 
    var fd = $(f).serializeArray(); 
    var d = {}; 
    $(fd).each(function() { 
     if (d[this.name] !== undefined){ 
      if (!Array.isArray(d[this.name])) { 
       d[this.name] = [d[this.name]]; 
      } 
      d[this.name].push(this.value); 
     }else{ 
      d[this.name] = this.value; 
     } 
    }); 
    return d; 
} 

//The way to use it : 
$('#myForm').submit(function(){ 
    var datas = formToJSON(this); 
    return false; 
}); 

खैर कारण है कि मैं इस समाधान ... आप ही नाम के साथ गुणकों इनपुट है, तो सभी मूल्यों किसी सरणी में संग्रहीत किया जाएगा लेकिन यदि नहीं, मूल्य सीधे रूप में संग्रहीत किया जाएगा पसंद करते हैं मुझे मूल रूप से स्पष्ट करता हूं JSON में सूचकांक के मूल्य ... यह

तो वह जगह है जहाँ यह डेनिलो Colasso के जवाब जहां JSON लौटे केवल सरणी मूल्यों के आधार पर किया जाता है से अलग है ... यदि आप नाम के एक पाठ क्षेत्र के साथ एक फार्म है सामग्री और गुणक लेखकों, यह फ़ंक्शन y पर वापस आ जाएगा कहां:

{ 
    content : 'This is The Content', 
    authors : 
     [ 
      0: 'me', 
      1: 'you', 
      2: 'him', 
     ] 
}