web-dev-qa-db-fra.com

Création dynamique d'un JSON avec chaque valeur d'entrée à l'aide de jquery

Je suis dans une situation où j'aimerais lire des données d'un format JSON via PHP, mais j'ai quelques difficultés à comprendre comment construire l'objet Javascript pour créer le format JSON de manière dynamique. 

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 saisit les données, je suis toutefois incapable de comprendre comment traiter à partir de maintenant.

var taskArray = {};

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

  //how to create JSON?

});

Je voudrais obtenir la sortie suivante si possible.

[{title: QA, email: '[email protected]'}, {title: PROD, email: '[email protected]'},{title: DEV, email: '[email protected]'}]

Où l'e-mail est acquis par la valeur du champ de saisie.

Toute lumière sur cette situation sera grandement appréciée!

javascriptjqueryhtmljsonhtml5
74
BaconJuice

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 recherchez an array of objects. Donc, vous créez un tableau vide. 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, faites alors

jsonString = JSON.stringify(jsonObj);

Exemple de sortie 

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

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

Selon les navigateurs que vous ciblez, vous pouvez utiliser la fonction JSON.stringify pour générer des chaînes JSON.

Voir http://www.json.org/js.html pour plus d'informations, vous pouvez également trouver un analyseur JSON pour les navigateurs plus anciens qui ne prennent pas en charge l'objet JSON de manière native.

Dans ton 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);
11
ChrisF

Peut-être que cela aidera, je préférerais du JS pur chaque fois que possible, cela améliore considérablement les performances, car il n’ya 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);
}
8
Salman

Vous pouvez également y parvenir avec le code suivant.

 let str = '{" + yourKey + ":'+yourValue+'}';
 str = JSON.parse(str);
0
Geetanshu Gulati