Comment accéder valeurs créées par serializeArray dans JQuery?
-
26-09-2019 - |
Question
J'ai ce code HTML:
<form id='myform'>
<input name='title' value='foo'/>
</form>
Et je crée un tableau d'objets à partir comme ceci:
var dataArray = $("#myform").serializeArray();
Maintenant, comment faire un accès I « title » dans tableauDonnees? Cela ne fonctionne pas:
alert(dataArray['title']);
alert(dataArray['title'].val());
La solution
Similaire à ce que Nick a posté, mais un peu plus propre
var dataArray = $("#myform").serializeArray(),
dataObj = {};
$(dataArray).each(function(i, field){
dataObj[field.name] = field.value;
});
Accédez ensuite de la même façon
alert(dataObj['title']);
Autres conseils
Vous pouvez parcourir, comme a ... @ Tom ou si vous accédez à plus d'un, être un peu plus efficace et la boucle une fois, la création d'un objet comme celui-ci:
var dataArray = $("#myform").serializeArray(),
len = dataArray.length,
dataObj = {};
for (i=0; i<len; i++) {
dataObj[dataArray[i].name] = dataArray[i].value;
}
Ensuite, vous pouvez y accéder comme vous voulez, par exemple:
alert(dataObj['title']); //or alert(dataObj.title);
alert(dataArray[0].name);
alert(dataArray[0].value);
for (i=0; i<dataArray.length; i += 1) {
if (dataArray[i].name === "title") {
// do something here...
}
}
Exécuter console.log(dataArray);
, puis ouvrez l'inspecteur des propriétés, et vérifier la console. Dans Chrome, vous auriez faites un clic droit et sélectionnez « Inspecter l'élément » puis cliquez sur l'icône à la recherche « > = » en bas à gauche, il est le deuxième de la gauche.
Dans Firefox Firebug et serait prête à installer il y a un onglet « Console »
Je ne sais pas si elle est disponible dans IE, probablement quelque chose dans les outils de développement (appuyez sur f12 ) mais je ne recommanderais pas le développement dans IE.
De toute façon ce listera l'objet d'une manière qui vous permet de naviguer et de voir les valeurs de chaque élément. De cette façon, vous pouvez l'utiliser pour déchiffrer comment accéder aux valeurs:)
Bonne chance
Ajout de toute façon d'aider les autres à l'avenir. Bonne façon d'inspecter rapidement toutes les valeurs.
var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);
append / echo / imprimer dataArray[0].name
à un div vous donnera 'title'
Alerting serializeArray des entrées dans myDiv (note: le sélecteur de :input
comprendra sélectionner et balises textarea aussi bien!):
//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);
Avec uderscore.js
, voici comment nous pouvons aller à ce sujet:
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>
Bonne chance ...