JQuery के साथ फॉर्म डेटा को जावास्क्रिप्ट ऑब्जेक्ट में कनवर्ट करें




json serialization (20)

चौड़ाई सभी दिए गए उत्तर में कुछ समस्या है जो ...

यदि name[key] जैसे सरणी के रूप में इनपुट नाम है, लेकिन यह इस तरह उत्पन्न होगा

 name:{
   key : value
 }

उदाहरण के लिए: यदि मेरे पास ऐसा फॉर्म है।

    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
    </form>

फिर यह इस तरह के ऑब्जेक्ट को सभी दिए गए उत्तर के साथ उत्पन्न करेगा।

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

लेकिन इसे नीचे की तरह उत्पन्न करना है, कोई भी नीचे इस तरह से प्राप्त करना चाहता है।

Object {
    name : 'value',
    name1 : {
        key1 : 'value1'
    },
    name2 : {
        key2 : 'value2'
    },
    name3 : {
        key2 : 'value2'
    }
}

फिर जेएस कोड के नीचे यह आज़माएं।

(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
$('form').getForm2obj();

https://code.i-harness.com

मैं अपने फॉर्म के सभी तत्वों को जावास्क्रिप्ट ऑब्जेक्ट में कैसे परिवर्तित करूं?

मैं प्रत्येक तत्व पर लूप किए बिना, मेरे रूप से जावास्क्रिप्ट ऑब्जेक्ट को स्वचालित रूप से बनाने का कोई तरीका चाहता हूं। मैं एक स्ट्रिंग नहीं चाहता, जैसा कि $('#formid').serialize(); द्वारा लौटाया गया है $('#formid').serialize(); , और न ही मैं चाहता हूं कि नक्शा $('#formid').serializeArray(); द्वारा लौटाया $('#formid').serializeArray();


फॉर्म को जेएसओएन की तरह एक बॉस में कनवर्ट करें

वर्तमान स्रोत GitHub और बोवर पर है।

$ bower jquery-serialize-object स्थापित करें

निम्नलिखित कोड अब बहिष्कृत है

निम्नलिखित कोड इनपुट नामों के सभी प्रकार के साथ काम कर सकते हैं; और जैसे ही आप उम्मीद करेंगे उन्हें संभालें।

उदाहरण के लिए:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

प्रयोग

$('#my-form').serializeObject();

जादूगर (जावास्क्रिप्ट)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

इन सभी उत्तरों को मेरे ऊपर शीर्ष पर लग रहा था। सादगी के लिए कुछ कहा जाना है। जब तक आपके सभी फॉर्म इनपुट में नाम विशेषता सेट हो, तब तक यह केवल जिम डैंडी काम करना चाहिए।

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

इस फ़ंक्शन को समान नाम वाले एकाधिक तत्वों के साथ बहुआयामी सरणी को संभालना चाहिए।

मैं इसे अब तक कुछ वर्षों से उपयोग कर रहा हूं:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

उपयोग:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

आउटपुट:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

एक-लाइनर (jQuery के अलावा कोई निर्भरता नहीं), map विधि में भेजे गए फ़ंक्शन के लिए निश्चित ऑब्जेक्ट बाइंडिंग का उपयोग करता है।

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

यह क्या करता है?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

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


क्या गलत है:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

टोबीस कोहेन के समाधान का एक निश्चित संस्करण। यह सही ढंग से 0 और '' जैसे गलत मूल्यों को संभालता है।

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

और आपके कोडिंग सुविधा के लिए एक कॉफीस्क्रिप्ट संस्करण:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

तुम यह केर सकते हो:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

JSON देखें।


प्रत्येक तत्व की जांच किए बिना ऐसा करने का कोई तरीका नहीं है। आप वास्तव में क्या जानना चाहते हैं "क्या किसी और ने पहले से ही एक विधि लिखी है जो एक फॉर्म को JSON ऑब्जेक्ट में परिवर्तित करता है?" निम्नलिखित की तरह कुछ काम करना चाहिए - ध्यान दें कि यह केवल आपको फॉर्म तत्व देगा जो एक पोस्ट के माध्यम से वापस किया जाएगा (एक नाम होना चाहिए)। यह परीक्षण नहीं किया जाता है

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

मुझे चयनित समाधान के साथ एक समस्या मिली।

सरणी आधारित नाम वाले रूपों का उपयोग करते समय jQuery serializeArray () फ़ंक्शन वास्तव में मर जाता है।

मेरे पास एक PHP ढांचा है जो सरणी-आधारित फ़ील्ड नामों का उपयोग करता है ताकि एक ही फॉर्म को एकाधिक दृश्यों में एक ही पृष्ठ पर कई बार रखा जा सके। विरोधाभासी रूप मॉडल के बिना एक ही पृष्ठ पर दोनों को जोड़ने, संपादित करने और हटाने के लिए यह आसान हो सकता है।

चूंकि मैं इस पूर्ण आधार कार्यक्षमता को लेने के बिना फॉर्मों को क्रमबद्ध करना चाहता था, इसलिए मैंने अपना खुद का seralizeArray () लिखने का फैसला किया:

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

कृपया ध्यान दें: यह फॉर्म सबमिट () के बाहर भी काम करता है, इसलिए यदि आपके शेष कोड में कोई त्रुटि उत्पन्न होती है तो फॉर्म सबमिट नहीं होगा यदि आप "परिवर्तन सहेजें" कहकर लिंक बटन पर रहते हैं।

यह भी ध्यान रखें कि सत्यापन के लिए सर्वर-साइड को भेजने के लिए डेटा एकत्र करने के लिए केवल इस फ़ॉर्म को फ़ॉर्म को सत्यापित करने के लिए इस फ़ंक्शन का उपयोग नहीं किया जाना चाहिए। ऐसे कमजोर और बड़े पैमाने पर असाइन किए गए कोड का उपयोग करने से XSS , इत्यादि का कारण बन जाएगा।


मुझे टोबीस कोहेन के कोड में समस्या मिली (मेरे पास सीधे टिप्पणी करने के लिए पर्याप्त अंक नहीं हैं), जो अन्यथा मेरे लिए काम करता है। यदि आपके पास एक ही नाम के साथ दो चयन विकल्प हैं, तो दोनों मूल्य = "" के साथ, मूल कोड "नाम": "" के बजाय "नाम": "" उत्पन्न करेगा: ""

मुझे लगता है कि अगर यह स्थिति में पहली बार "|| o [this.name] == '' जोड़कर तय किया जा सकता है:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

मैं इस दृष्टिकोण को पसंद करता हूं क्योंकि: आपको 2 संग्रहों को फिर से शुरू करने की आवश्यकता नहीं है, यदि आपको आवश्यकता हो तो आप "नाम" और "मूल्य" के अलावा अन्य चीज़ों पर जा सकते हैं, और आप ऑब्जेक्ट में उन्हें स्टोर करने से पहले अपने मूल्यों को स्वच्छ कर सकते हैं ( यदि आपके पास डिफ़ॉल्ट मान हैं जिन्हें आप स्टोर नहीं करना चाहते हैं, उदाहरण के लिए)।

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

इस तरह प्रयोग करें:

var obj = $.formObject($("#someForm"));

केवल फ़ायरफ़ॉक्स में परीक्षण किया गया।


यदि आप Underscore.js का उपयोग कर रहे हैं तो आप अपेक्षाकृत संक्षिप्त उपयोग कर सकते हैं:

_.object(_.map($('#myform').serializeArray(), _.values))

सरलता यहां सबसे अच्छी है। मैंने नियमित अभिव्यक्ति के साथ एक साधारण स्ट्रिंग का उपयोग किया है, और उन्होंने अब तक एक आकर्षण की तरह काम किया है। मैं नियमित अभिव्यक्ति विशेषज्ञ नहीं हूं, लेकिन मुझे यकीन है कि आप बहुत जटिल वस्तुओं को भी बना सकते हैं।

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

मास्क के समाधान का उपयोग करके, मैंने इसे एएसपी.नेट एमवीसी के समान तरीके से अपने नेस्टेड / जटिल वस्तुओं को संभालने के तरीके के साथ काम करने के लिए संशोधित किया। आपको बस इतना करना है कि इस पर वैध टुकड़ा संशोधित करें:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

यह मिलान करेगा और उसके बाद नामों के साथ सही ढंग से तत्वों को मानचित्र करेगा:

<input type="text" name="zooName" />

तथा

<input type="text" name="zooAnimals[0].name" />

किसी ऑब्जेक्ट में कुछ भी चालू करें (इकाई परीक्षण नहीं)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

परीक्षण का आउटपुट:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

पर

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

निकलेगा:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

Another answer

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})
<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData



I like samuels version, but I believe it has a small error. Normally JSON is sent as

{"coreSKU":"PCGUYJS","name_de":"whatever",...

NOT as

[{"coreSKU":"PCGUYJS"},{"name_de":"whatever"},...

so the function IMO should read:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

and to wrap it in data array (as commonly expected, too), and finally send it as astring App.stringify( {data:App.toJson( '#cropform :input' )} )

For the stringify look at Question 3593046 for the lean version, at json2.js for the every-eventuality-covered version. That should cover it all :)





serialization