Membuat JSON secara dinamis dengan setiap nilai input menggunakan jquery

91

Saya mendapat situasi di mana saya ingin membaca beberapa data dari format JSON melalui PHP, namun saya mengalami beberapa masalah dalam memahami bagaimana saya harus membangun objek Javascript untuk membuat format JSON secara dinamis.

Skenario saya adalah sebagai berikut:

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

Kode Javascript yang saya miliki sejauh ini melalui setiap masukan yang mengambil data, namun saya tidak dapat memahami cara memproses mulai dari sini.

var taskArray = {};

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

  //how to create JSON?

});

Saya ingin mendapatkan hasil berikut jika memungkinkan.

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

Dimana email diperoleh dengan nilai field input.

BaconJuice
sumber

Jawaban:

274

Seperti ini:

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

Penjelasan

Anda sedang mencari an array of objects. Jadi, Anda membuat array kosong. Buat objek untuk masing-masing inputdengan menggunakan 'judul' dan 'email' sebagai kunci. Kemudian Anda menambahkan setiap objek ke array.

Jika Anda membutuhkan string, lakukan

jsonString = JSON.stringify(jsonObj);

Output Sampel

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
ATOzTOA
sumber
Mengapa dalam 3 contoh ini saya selalu mendapatkan ini? 'Uncaught ReferenceError: jsonObj tidak ditentukan'
Gino
@ Gino Apakah Anda menyalin tempel atau mengetik? Lihat baris yang mendefinisikan jsonObj.
ATOzTOA
15

Saya rasa Anda tidak dapat mengubah objek JavaScript menjadi string JSON hanya menggunakan jQuery, dengan asumsi Anda memerlukan string JSON sebagai output.

Bergantung pada browser yang Anda targetkan, Anda dapat menggunakan JSON.stringifyfungsi tersebut untuk menghasilkan string JSON.

Lihat http://www.json.org/js.html untuk informasi lebih lanjut, di sana Anda juga dapat menemukan parser JSON untuk browser lama yang tidak mendukung objek JSON secara native.

Dalam kasus Anda:

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
sumber
10

Mungkin ini akan membantu, saya lebih suka JS murni jika memungkinkan, ini meningkatkan kinerja secara drastis karena Anda tidak akan memiliki banyak panggilan fungsi 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
sumber
Big + 1 pergi dengan solusi ini jawaban yang diterima menyebabkan saya beberapa masalah di IE
Bobadevv
0

sama dari contoh di atas - jika Anda hanya mencari json (bukan array objek) gunakan saja

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

keluaran ini akan dicetak sebagai (json yang valid)

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