Javascript Girl
  1. Javascript Girl
  3. Convertissez un champ de formulaire HTML en un objet JSON avec des objets internes
Intereting Posts
Validation de la date de javascript non validation 31 février Array dans un objet Javascript? Comment obtenir le bouton Suivant sur Softkeyboard Android à la place de Go Button dans phonegap Détection de fonctionnalité pour pouvoir déposer le fichier sur l'entrée du fichier HTML Une explication plus claire de la récursivité et du flux d'exécution en JavaScript? Convention pour les objets du modèle de domaine Javascript Empêcher la soumission d'une entrée et d'une pièce textuelles vierges Google Spreadsheets: Iterate over range, ajoute la chaîne à chaque React.js – Communiquer entre les composants des frères et sœurs Webpack Loader ne fonctionne pas sur Jenkins CI Build JavaScript Split sans perte de caractère Obtenir l'attribut meta data en javascript Comment créer un filtre dans Angularjs? Chutzpah et Jasmine 2.0 et requêtes AngularJS: exemple de base pour utiliser l'authentification dans une application de page unique

Convertissez un champ de formulaire HTML en un objet JSON avec des objets internes

Compte tenu du formulaire HTML suivant: 

<form id="myform"> Company: <input type="text" name="Company" value="ACME, INC."/> First Name: <input type="text" name="Contact.FirstName" value="Daffy"/> Last Name: <input type="text" name="Contact.LastName" value="Duck"/> </form>

Quelle est la meilleure façon de sérialiser ce formulaire en javascript vers un objet JSON au format: 

 { Company:"ACME, INC.", Contact:{FirstName:"Daffy", LastName:"Duck"} }

Notez également qu'il pourrait y avoir plus de 1 "." Entrez le nom du champ.

Je pense que ce que vous feriez, c'est ceci: pour chaque saisie, divisez d'abord le nom aux séparateurs (les caractères '.'). Maintenant, vous avez un éventail de noms. Vous pouvez ensuite l'itérer à travers ce tableau, en vous assurant que votre objet "assembler" cible (et sous objets) possède des conteneurs chaque fois que vous rencontrez un nouveau segment de nom. Lorsque le tableau possède 1 élément, il suffit d'ajouter la valeur. 

 $.fn.extractObject = function() { var accum = {}; function add(accum, namev, value) { if (namev.length == 1) accum[namev[0]] = value; else { if (accum[namev[0]] == null) accum[namev[0]] = {}; add(accum[namev[0]], namev.slice(1), value); } }; this.find('input, textarea, select').each(function() { add(accum, $(this).attr('name').split('.'), $(this).val()); }); return accum; }); // ... var object = $('#myform').extractObject();

Je voulais simplement faire ça pour qu'il y ait un bug ou deux; Je ne me souviens pas si tous les navigateurs ont "tranche" mais je pense qu'ils le font.

(Modifier: J'ai oublié l'appel important pour split() )

Vous pouvez parcourir les champs de formulaire par nom, utiliser String#split pour diviser les noms sur le point et créer votre structure résultante. Code conceptuel: 

 function serializeDeep(form) { var rv, obj, elements, element, index, names, nameIndex, value; rv = {}; elements = form.elements; for (index = 0; index < elements.length; ++index) { element = elements[index]; name = element.name; if (name) { value = $(element).val(); names = name.split("."); obj = rv; for (nameIndex = 0; nameIndex < names.length; ++nameIndex) { name = names[nameIndex]; if (nameIndex == names.length - 1) { obj[name] = value; } else { obj = obj[name] = obj[name] || {}; } } } } return rv; }

Notez que cela ne permet pas les champs avec des noms répétés (ce qui devrait créer des tableaux), et ne gère pas de manière élégante une situation où vous utilisez les noms "foo" et "foo.bar". Mais il devrait vous faire démarrer.

Je l'ai réussi de cette façon: 

 $('#Myform').attr('onsubmit', 'test()'); function test() { var obj = {}; obj.title =$('#title').prop('value'); console.log('title: '+obj.title); obj.website =$('#website').prop('value'); console.log('website: '+obj.website); obj.tags =$('#tags').prop('value').split(','); console.log('tags: '+obj.tags); do_something(JSON.stringify(obj)); }

Bien sûr, cela peut être fait si vous savez quels sont les noms, et je génère en fait la table elle-même en utilisant le plug-in Formation.

Créez un objet de cette forme puis utilisez un codeur JSON pour l'écrire.