wake-up-neo.com

Wie konvertiere ich jQuery.serialize () -Daten in ein JSON-Objekt?

Gibt es eine bessere Lösung zum Konvertieren von Formulardaten, die bereits durch die jQuery-Funktion serialize () serialisiert wurden, wenn das Formular mehrere Eingabefeld-Felder enthält. Ich möchte in der Lage sein, die Formulardaten in ein JSON-Objekt zu konvertieren, um andere informative Tabellen neu zu erstellen. Sagen Sie mir einen besseren Weg, um die serialize-Zeichenfolge als JSON-Objekt konvertieren zu lassen.

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

    <!--array input fields below-->
    <input name='friendname[]' type='text' /> // Bily
    <input name='fiendemail[]' type='text' /> // [email protected]

    <!--duplicated fields below to add more friends -->
    <input name='friendname[]' type='text' /> // Andy
    <input name='fiendemail[]' type='text' /> // [email protected]

    <input name='friendname[]' type='text' /> // Adam
    <input name='fiendemail[]' type='text' /> // [email protected]
</form>

Die Jquery-Methode, mit der die Daten abgerufen werden

var MyForm = $("#sampleform").serialize();
/** result : MyName=Raf&friendname[]=Billy&fiendemail[][email protected]&friendname[]=Andy&fiendemail[][email protected]&friendname[]=Adam&fiendemail[][email protected]
*/

wie mache ich diese Daten in ein JSON-Objekt? die die folgenden Beispiel-JSON-Daten aus dem obigen Formular enthalten sollte.

{
    "MyName":"raf",
    "friendname":[
        {"0":"Bily"},
        {"1":"Andy"},
        {"2":"Adam"}
    ],
    "friendemail":[
        {"0":"[email protected]"},
        {"1":"[email protected]"},
        {"2":"[email protected]"}
    ]
}
42
Raftalks
var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

Einfach und schnell;)

40
Danilo Colasso

Ich hatte kürzlich genau dieses Problem. Anfangs haben wir die serializeArray() - Methode von jQuery verwendet, diese enthält jedoch keine deaktivierten Formularelemente. Oft werden Formularelemente, die mit anderen Quellen auf der Seite "synchronisiert" werden, deaktiviert. Die Daten müssen jedoch weiterhin in unser serialisiertes Objekt aufgenommen werden. Also ist serializeArray() aus. Wir haben den Selektor :input verwendet, um alle Eingabeelemente (sowohl aktiviert als auch deaktiviert) in einem bestimmten Container abzurufen, und dann $.map(), um unser Objekt zu erstellen.

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

Damit dies funktioniert, benötigt jede Ihrer Eingaben ein name-Attribut, das der Name der Eigenschaft des resultierenden Objekts ist.

Das ist etwas von dem, was wir verwendet haben. Wir mussten ein Objekt erstellen, das als .NET-IDictionary strukturiert war. Daher haben wir Folgendes verwendet: (Ich gebe es hier an, falls es nützlich ist)

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

Ich mag beide Lösungen, weil sie einfache Funktionen der Funktion $.map() sind und Sie die vollständige Kontrolle über Ihren Selektor haben (also welche Elemente Sie in Ihrem Ergebnisobjekt einschließen). Außerdem ist kein zusätzliches Plugin erforderlich. Einfache alte jQuery.

12
Samuel Meacham

Verwenden Sie das jQuery.serializeJSON plugin . Es konvertiert Formulare mit demselben Format wie in einem Rails-Params-Objekt, das sehr standardisiert und getestet ist.

7
tothemario

Ich verwende dieses sehr kleine jQuery-Plugin, das ich von DocumentCloud erweitert habe:

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

Es handelt sich im Wesentlichen um zwei Zeilen Code, aber es erfordert _.js (Underscore.js), da es auf einer reduce-Funktion basiert.

$.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;
    }, {});
  }
});

Erweiterungen:

  • Ein Eingabewert wird nicht serialisiert, wenn er null ist
  • Es kann einige Eingaben ausschließen, indem ein Array von Eingabenamen an das Argument exclude übergeben wird. i.e. ["password_confirm"]
5
S.C.

Eine äquivalente Lösung für Danilo Colassos , mit den gleichen Vor- und Nachteilen von .serializeArray() (im Grunde verwendet .reduce anstelle von $.each).

Mit wenig Aufwand können die zusätzlichen Funktionen in den Antworten von S.C. implementiert werden, ohne dass Erweiterungen erforderlich sind.

$(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
    }
);
4
LSerni

Unterstrich & jQuery verwenden 

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"}
2
alejandro

Ich denke, es gibt eine Menge guter Antworten, und ich habe aus diesen Antworten meine eigene Funktion gemacht.

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;
});

Lassen Sie mich im Grunde erklären, warum ich diese Lösung vorziehen möchte: Wenn Sie mehrere Eingaben mit demselben Namen haben, werden alle Werte in einem Array gespeichert. Wenn dies nicht der Fall ist, wird der Wert direkt als Indexwert gespeichert in der JSON ... Hier unterscheidet es sich von die Antwort von Danilo Colasso wo die zurückgegebene JSON nur auf Array-Werten basiert ...

Wenn Sie also ein Formular mit einem Textbereich mit dem Namen content und mehreren hors haben, wird diese Funktion an Sie zurückgegeben: 

{
    content : 'This is The Content',
    authors : 
        [
            0: 'me',
            1: 'you',
            2: 'him',
        ]
}
1
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);

});
1
Deepak Bansode

Bei allen gegebenen Antworten gibt es ein Problem, das ist ...

Wenn der eingegebene Name als Array wie name[key], aber es wird so generiert

 name:{
   key : value
 }

Beispielsweise : Wenn ich so eine Form habe.

    <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>

Dann wird es ein Objekt wie dieses mit allen gegebenen Antworten erzeugen.

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

Aber es muss wie unten generieren, jeder möchte so wie unten werden.

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

Dann versuchen Sie dies unter js Code.

(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);
console.log($('form').getForm2obj());
<!DOCTYPE html><html><head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
        <input type="checkbox" name="name4[]" value="1" checked="checked">
        <input type="checkbox" name="name4[]" value="2">
        <input type="checkbox" name="name4[]" value="3">
    </form>
</body></html>
0
Bhavik Hirani

wenn Sie ajax-Requests verwenden, ist es nicht nötig, json-object nur $('#sampleform').serialize() vorzubereiten, oder wenn Sie einen anderen Zweck haben, ist hier meine Lösung:

var formserializeArray = $("#sampleform").serializeArray();   
var jsonObj = {};
jQuery.map(formserializeArray , function (n, i) {
    jsonObj[n.name] = n.value;
});
0
Haritsinh Gohil