forme d'affichage en utilisant javascript et JSON avec des objets imbriqués

Question

j'ai une forme html qui a la structure suivante:

<input type="text" name="title" /> 
<input type="text" name="persons[0].name" /> 
<input type="text" name="persons[0].color" /> 
<input type="text" name="persons[1].name" /> 
<input type="text" name="persons[1].color" /> 

Je voudrais sérialiser dans le JSON suivant:

{ 
      "title":"titlecontent", 
      "persons":[ 
      { 
        "name":"person0name", 
        "color":"red" 
      }, 
      { 
        "name":"person1name", 
        "color":"blue" 
      } 
      ] 
    } 

Notez que le nombre de personnes peut varier d'un cas à l'autre.

La structure du formulaire html peut changer, mais pas la structure du fichier json soumis.

Comment cela est-il le plus facile?

Answer 1

Hey man en utilisant jQuery et le jQuery JSON plugin, j'ai pu faire ce qui suit: je devais changer votre code html un peu:

<div id="Directory"> 
    <input type="text" class="title" /> 
    <span class="person 0"> 
     <input type="text" class="name" /> 
     <input type="text" class="color" /> 
    </span> 
    <span class="person 1"> 
     <input type="text" class="name" /> 
     <input type="text" class="color" /> 
    </span> 
</div> 

Et puis je suis en mesure d'utiliser le code suivant pour créer votre tableau JSON:

var Directory = {}; 
Directory.title = $("div#Directory input.title").val(); 
Directory.persons = []; 
$("div#Directory span.person").each(function() { 
    var index = $(this).attr("class").split(" ")[1]; 
    Directory.persons.push({ 
     name:"person" + index + $(this).children("input.name").val(), 
     color:$(this).children("input.color").val(), 
    }); 
}); 
alert($.toJSON(Directory)); 

Cette http: //stackoverflow.com/questions/492833/getting-correct-index-from-input-array-in-jquery est aussi un peu utile. Malheureusement, je ne pouvais pas répliquer leur méthode de sélection avec votre ensemble d'attributs particulier. J'espère que je ne fais pas vos devoirs;) Il y a un espace dans l'URL ci-dessus parce que je n'ai pas assez de points de réputation pour mettre plus d'un lien hypertexte.

Ceci est votre JSON final:

{"title":"abc","persons":[{"name":"person0englishman","color":"pink"},{"name":"person1indian","color":"brown"}]} 

Answer 2

Dépendances:

• locutus (NPM installer locutus)
• jQuery

code:

var parse_str = require('locutus/php/strings/parse_str'); 
parse_str($("#form ID").serialize(), var result = {}); 
console.log(result);