Wie greife ich von serializeArray in JQuery erstellt Werte?

Question

Ich habe dieses HTML:

<form id='myform'>
<input name='title' value='foo'/>
</form>

Und ich erstellen ein Objekt Array aus es wie folgt aus:

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

Jetzt tun, wie ich Zugang ‚Titel‘ in dataarray? Dies funktioniert nicht:

alert(dataArray['title']);
alert(dataArray['title'].val());

Answer 1

Ähnlich wie Nick gepostet, aber ein wenig sauberer

var dataArray = $("#myform").serializeArray(),
    dataObj = {};

$(dataArray).each(function(i, field){
  dataObj[field.name] = field.value;
});

Zugriff dann auf die gleiche Weise

alert(dataObj['title']);

Answer 2

Sie können entweder eine Schleife durch, als @ Tom hat ... oder wenn Sie mehr als ein, seinen etwas effiziente und Schleife einmal zugreifst, ein Objekt wie folgt zu erstellen:

var dataArray = $("#myform").serializeArray(),
    len = dataArray.length,
    dataObj = {};

for (i=0; i<len; i++) {
  dataObj[dataArray[i].name] = dataArray[i].value;
}

Dann können Sie darauf zugreifen, wie Sie wollen, zum Beispiel:

alert(dataObj['title']); //or alert(dataObj.title);

Sie können es hier testen.

Answer 3

alert(dataArray[0].name);
alert(dataArray[0].value);

So:

for (i=0; i<dataArray.length; i += 1) {
    if (dataArray[i].name === "title") {
        // do something here...
    }
}

Answer 4

Ausführen console.log(dataArray);, öffnen Sie dann den Eigenschafteninspektor, und die Konsole überprüfen. In Chrome, würden Sie einen Rechtsklick und wählen Sie „Inspect Element“ und dann auf die „> =“ suchen Symbol unten links, es ist die zweite von links.

In Firefox würden Sie Firebug installieren und es gibt eine Registerkarte mit der Bezeichnung "Console"

Nicht sicher, ob es in IE, wahrscheinlich etwas in den Entwicklertools (drücken Sie f12 ) verfügbar ist, aber ich würde nicht empfehlen, in IE zu entwickeln.

Wie auch immer dies wird das Objekt in einer Art und Weise auflisten, die Sie die Werte der einzelnen Elemente navigieren und sehen können. Auf diese Weise können Sie diese dann verwenden zu entschlüsseln, wie die Werte für den Zugriff auf:)

Viel Glück

Answer 5

Das Hinzufügen dieser ohnehin anderen zu helfen in der Zukunft. Guter Weg, um schnell alle Werte überprüfen.

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

Answer 6

append / echo / drucken dataArray[0].name zu einem div werden Sie 'Titel' geben

Answer 7

Alerting serializeArray der Eingänge in myDiv (Anmerkung: der :input Selektor gehört wählen und Textarea-Tags als auch!):

//alert(fData.length) // how many inputs got picked up 
var fData=$("#myDiv :input").serializeArray();
var msg=""; 
for(var i=0;i<fData.length;i++){
    var raKy=Object.keys(fData[i]); 
    msg+="\n"+raKy[0]+":"+eval("fData[i]."+raKy[0])+" "+raKy[1]+":"+eval("fData[i]."+raKy[1]); 
}
alert(msg);

Answer 8

Mit uderscore.js ist dies, wie wir es gehen kann:

var serializedArray = $('form#spiderman-application').serializeArray();

var serializedObject = _.object(
  _.pluck(serializedArray, 'name'), 
  _.pluck(serializedArray, 'value')
)

console.log(serializedObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<form id="spiderman-application">
  <legend>Application Form</legend>
  <input name="./fname" value="Peter" />
  <input name="./lname" value="Parker" />
</form>

Good Luck ...