Comment accéder valeurs créées par serializeArray dans JQuery?

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

Answer 1

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']);

Answer 2

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

Vous pouvez le tester ici .

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

append / echo / imprimer dataArray[0].name à un div vous donnera 'title'

Answer 7

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

Answer 8

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