Création d'un JSON dynamiquement avec chaque valeur d'entrée en utilisant jquery

Question

J'ai une situation où je voudrais lire des données à partir d'un format JSON par le biais de PHP, mais j'ai du mal à comprendre comment je dois construire l'objet Javascript pour créer le format JSON dynamiquement.

Mon scénario est le suivant :

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

Le code Javascript que j'ai jusqu'à présent passe par chaque entrée pour saisir les données, mais je ne parviens pas à comprendre comment les traiter à partir de là.

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

J'aimerais obtenir le résultat suivant, si possible.

[{title: QA, email: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

Où l'email est acquis par la valeur du champ de saisie.

Answer 1

Comme ça :

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

Explication

Vous êtes à la recherche de an array of objects . On crée donc un tableau vierge. Créez un objet pour chaque input en utilisant "title" et "email" comme clés. Ensuite, vous ajoutez chacun des objets au tableau.

Si vous avez besoin d'une chaîne de caractères, alors faites

jsonString = JSON.stringify(jsonObj);

Exemple de sortie

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}]

Answer 2

Je ne pense pas que vous puissiez transformer des objets JavaScript en chaînes JSON en utilisant uniquement jQuery, en supposant que vous ayez besoin de la chaîne JSON comme sortie.

En fonction des navigateurs que vous ciblez, vous pouvez utiliser la fonction JSON.stringify pour produire des chaînes JSON.

Véase http://www.json.org/js.html pour plus d'informations. Vous y trouverez également un analyseur JSON pour les anciens navigateurs qui ne prennent pas en charge l'objet JSON de manière native.

Dans votre cas :

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);

Answer 3

Je préfère le JS pur dans la mesure du possible, il améliore considérablement les performances car il n'y a pas beaucoup d'appels de fonctions JQuery.

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}

Answer 4

Même chose que dans l'exemple précédent - si vous ne cherchez que du json (pas un tableau d'objets), utilisez simplement

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

cette sortie s'imprimera comme (un json valide)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}