Convertir champ d'un formulaire HTML à un objet JSON avec des objets internes

Le suivant formulaire HTML:

<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 sérialiser ce formulaire en javascript pour un objet JSON dans le format:

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

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

  • Oui, je l'ai fait pour le Printemps du Formulaire, et je l'ai fait c'est exactement la même façon, et il a bien fonctionné pour moi.
  • Avez-vous l'esprit de me demander pourquoi vous êtes sérialisation JSON au lieu de simplement l'envoyer en train de comprendre le côté serveur?
  • Le soumis à un service web REST qui existe sur un autre serveur.
InformationsquelleAutor Tawani | 2010-03-31
  1. 12

    Je pense que ce que vous pouvez faire est ceci: pour chaque entrée, première division, le nom à la séparateurs (les caractères'.'). Maintenant, vous avez un tableau de noms. Vous pouvez alors parcourir la pile en veillant à ce que votre cible "assemblée" de l'objet (et des sous-objets) ont des récipients à chaque fois que vous tombez sur un nouveau nom de segment. Lorsque le tableau a 1 élément, il vous 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 viens de tri de fait que jusqu'alors il pourrait y avoir un bug ou deux; je ne me souviens pas si tous les navigateurs ont "tranche" mais je pense qu'ils le font.

    (edit: j'ai oublié l'importance de l'appel à split())

    • Exactement ce dont j'avais besoin. J'ai aussi ajouté des contrôles pour les boutons, les cases à cocher multiples (avec le même nom) et des éléments sans les noms.
    • quick and dirty trick pour gérer case de saisie, ajouter juste avant "ajouter(amortissement, $(this).attr(..." : if( $(this).attr('checked') && ('checked' == $(this).attr('checked'))) { $(this).val(true); }
    InformationsquelleAutor Pointy
  2. 2

    Vous pouvez faire une boucle à travers les champs de formulaire par un nom, utilisez String#split de diviser les noms sur la dot, et de construire votre structure qui en résulte. Concept de code:

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

    Noter que cela ne vous permet pas pour les champs avec la répétition des noms (ce qui devrait créer des tableaux), ni ne élégamment face à une situation où vous utilisez les noms de "foo" et "foo.bar". Mais il devrait vous obtenir a commencé.

    InformationsquelleAutor T.J. Crowder
  3. 1

    J'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 ce que les noms sont, et en fait, je suis la génération de la table elle-même à l'aide de la Formation de plug-in.

    InformationsquelleAutor errordeveloper
  4. 1

    J'ai créé un exemple de cette question à l'aide de la plaine js, veuillez consulter le développeur de l'outil de console pour voir l'objet de données!

    jsfiddle exemple

    var data = {};
var array = 'person.name.first'.split('.');
var value = 'myFirstName';
generateObj(data, array, value);
console.log(data);

function generateObj(obj, arr, val) {
    if (arr.length === 1) {
        obj[arr[0]] = val
        return;
    } 

    var restArr = arr.splice(1);
    if (!obj[arr[0]]) {
        obj[arr[0]] = {};
    }
    generateObj(obj[arr[0]], restArr, val);
}

    solution:

    1. transformer chaque chaîne du nom du tableau.
    2. itérer sur chaque tableau.
    3. de manière récursive appeler une méthode qui créer un obj et de définir cette obj que la valeur de la propriété et de passer à cet obj à la prochaine récursivité.
    InformationsquelleAutor Sean Yang
  5. -1

    Créer un objet de cette forme, puis d'utiliser un JSON codeur de l'écrire.

    • Je ne pense pas que c'est ce que la question est à propos.
    • Quel est votre alors?
    • "Quel est votre alors?" Comment faire la partie 1 de votre réponse.
    • J'ai juste tapé dans une réponse, il veut en pointillés noms impliquent de la structure.
    InformationsquelleAutor spender