Dynamiczne tworzenie JSON z każdą wartością wejściową przy użyciu jQuery

91

Mam sytuację, w której chciałbym odczytać niektóre dane z formatu JSON przez PHP, jednak mam pewne problemy ze zrozumieniem, jak powinienem skonstruować obiekt Javascript, aby dynamicznie utworzyć format JSON.

Mój scenariusz jest następujący:

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

Kod Javascript, który mam do tej pory, przechodzi przez każde wejście przechwytuje dane, jednak nie jestem w stanie zrozumieć, jak dalej przetwarzać.

var taskArray = {};

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

  //how to create JSON?

});

Chciałbym uzyskać następujące wyniki, jeśli to możliwe.

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

Gdzie e-mail jest pozyskiwany przez wartość pola wejściowego.

BaconJuice
źródło

Odpowiedzi:

274

Lubię to:

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

Wyjaśnienie

Szukasz an array of objects. Więc tworzysz pustą tablicę. Utwórz obiekt dla każdego input, używając „tytułu” i „e-maila” jako kluczy. Następnie dodajesz każdy z obiektów do tablicy.

Jeśli potrzebujesz sznurka, zrób

jsonString = JSON.stringify(jsonObj);

Przykładowe wyjście

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
ATOzTOA
źródło
Dlaczego w tych 3 przykładach zawsze to rozumiem? „Uncaught ReferenceError: jsonObj is not defined”
Gino
@Gino Czy skopiowałeś wklej lub wpisałeś? Zobacz wiersz, który definiuje jsonObj.
ATOzTOA
15

Nie sądzę, aby można było zamienić obiekty JavaScript w ciągi JSON przy użyciu tylko jQuery, zakładając, że potrzebujesz ciągu JSON jako danych wyjściowych.

W zależności od przeglądarek, na które kierujesz reklamy, możesz użyć rozszerzenia JSON.stringify funkcji do tworzenia ciągów JSON.

Zobacz http://www.json.org/js.html uzyskać więcej informacji, nie można również znaleźć parser JSON dla starszych przeglądarek, które nie obsługują obiekt JSON natywnie.

W Twoim przypadku:

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
źródło
10

Może to pomoże, wolałbym czysty JS wszędzie tam, gdzie to możliwe, drastycznie poprawia wydajność, ponieważ nie będziesz mieć wielu wywołań funkcji 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);
}
Salman
źródło
Big + 1 poszedł z tym rozwiązaniem, zaakceptowana odpowiedź spowodowała pewne problemy w IE
Bobadevv
0

to samo z powyższego przykładu - jeśli szukasz po prostu json (nie tablicy obiektów), po prostu użyj

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

to wyjście zostanie wydrukowane jako (prawidłowy plik json)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
Pravin
źródło