Dynamisches Erstellen eines JSON mit jedem Eingabewert mithilfe von jquery

88

Ich habe eine Situation, in der ich einige Daten aus einem JSON-Format über PHP lesen möchte, habe jedoch einige Probleme beim Verständnis, wie ich das Javascript-Objekt erstellen soll, um das JSON-Format dynamisch zu erstellen.

Mein Szenario ist wie folgt:

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

Der Javascript-Code, den ich bisher habe, durchläuft jede Eingabe und erfasst die Daten. Ich kann jedoch nicht verstehen, wie ich von nun an verarbeiten soll.

var taskArray = {};

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

  //how to create JSON?

});

Ich möchte wenn möglich die folgende Ausgabe erhalten.

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

Wo die E-Mail vom Eingabefeldwert erfasst wird.

BaconJuice
quelle

Antworten:

267

So was:

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

Erläuterung

Sie suchen an array of objects. Sie erstellen also ein leeres Array. Erstellen Sie für jedes Objekt ein Objekt, inputindem Sie "Titel" und "E-Mail" als Schlüssel verwenden. Anschließend fügen Sie jedes der Objekte zum Array hinzu.

Wenn Sie eine Zeichenfolge benötigen, tun Sie dies

jsonString = JSON.stringify(jsonObj);

Beispielausgabe

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
ATOzTOA
quelle
Warum bekomme ich das in diesen 3 Beispielen immer? 'Ungefangener Referenzfehler: jsonObj ist nicht definiert'
Gino
@Gino Haben Sie kopiert, eingefügt oder eingegeben? Siehe die Zeile, die jsonObj definiert.
ATOzTOA
15

Ich glaube nicht, dass Sie JavaScript-Objekte nur mit jQuery in JSON-Zeichenfolgen umwandeln können, vorausgesetzt, Sie benötigen die JSON-Zeichenfolge als Ausgabe.

Abhängig von den Browsern, auf die Sie abzielen, können Sie die JSON.stringifyFunktion verwenden, um JSON-Zeichenfolgen zu erstellen.

Siehe http://www.json.org/js.html für weitere Informationen geben Sie auch einen JSON - Parser für älteren Browser finden können , die nicht nativ das JSON - Objekt unterstützen.

In deinem Fall:

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);
ChrisF
quelle
10

Vielleicht hilft das, ich würde wo immer möglich reines JS bevorzugen, es verbessert die Leistung drastisch, da Sie nicht viele JQuery-Funktionsaufrufe haben.

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);
}
Salman
quelle
Big + 1 ging mit dieser Lösung die akzeptierte Antwort verursachte mir einige Probleme in IE
Bobadevv
0

Das gleiche wie im obigen Beispiel - wenn Sie nur nach json suchen (kein Array von Objekten), verwenden Sie einfach

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

Diese Ausgabe wird gedruckt als (ein gültiger JSON)

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