Pertanyaan Konversi data formulir ke objek JavaScript dengan jQuery


Bagaimana cara mengonversi semua elemen formulir saya ke objek JavaScript?

Saya ingin memiliki beberapa cara otomatis membangun objek JavaScript dari formulir saya, tanpa harus mengulang setiap elemen. Saya tidak ingin string, seperti dikembalikan oleh $('#formid').serialize();, saya juga tidak ingin peta dikembalikan $('#formid').serializeArray();


1437


asal


Jawaban:


serializeArray sudah melakukan hal itu. Anda hanya perlu memijat data ke dalam format yang Anda perlukan:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Hati-hati terhadap bidang tersembunyi yang memiliki nama yang sama sebagai masukan nyata karena akan ditimpa.


1541



Konversikan formulir ke JSON LIKE A BOSS


Sumber saat ini aktif GitHub dan bower.

$ bower install jquery-serialize-object


Kode berikut sekarang tidak lagi digunakan.

Kode berikut dapat bekerja dengan segala macam nama input; dan tangani mereka seperti yang Anda harapkan.

Sebagai contoh:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

Pemakaian

$('#my-form').serializeObject();

The Sorcery (JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

406



Ada apa dengan:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

252



Versi tetap dari solusi Tobias Cohen. Ini benar menangani nilai-nilai palsu seperti 0 dan ''.

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

Dan versi CoffeeScript untuk kenyamanan pengkodean Anda:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

96



Saya suka menggunakan Array.prototype.reduce karena itu satu-liner, dan itu tidak bergantung pada Underscore.js atau sejenisnya:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

Ini mirip dengan menggunakan jawaban Array.prototype.map, tetapi Anda tidak perlu mengacaukan cakupan Anda dengan variabel objek tambahan. Belanja sekali jalan.

CATATAN PENTING: Formulir dengan masukan yang memiliki duplikat name atribut adalah HTML yang valid, dan sebenarnya merupakan pendekatan umum. Menggunakan salah satu jawaban di thread ini tidak pantas dalam kasus itu (karena kunci objek harus unik).


49



Semua jawaban ini tampak sangat di atas bagi saya. Ada sesuatu yang bisa dikatakan untuk kesederhanaan. Selama semua input form Anda memiliki atribut name set, ini seharusnya hanya bekerja jim dandy.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

28



Jika Anda menggunakan Underscore.js Anda dapat menggunakan yang relatif singkat:

_.object(_.map($('#myform').serializeArray(), _.values))

24



Tidak ada cara untuk melakukan ini tanpa memeriksa masing-masing elemen. Apa yang benar-benar ingin Anda ketahui adalah "memiliki orang lain yang sudah menulis metode yang mengubah bentuk ke objek JSON?" Sesuatu seperti yang berikut ini seharusnya berfungsi - perhatikan bahwa ini hanya akan memberi Anda elemen formulir yang akan dikembalikan melalui POST (harus memiliki nama). Ini adalah tidak diuji.

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

21



Ok, saya tahu ini sudah memiliki jawaban yang sangat upvoted, tetapi yang lain pertanyaan serupa ditanyakan baru-baru ini, dan saya diarahkan untuk pertanyaan ini juga. Saya ingin menawarkan solusi saya juga, karena menawarkan keuntungan atas solusi yang diterima: Anda dapat menyertakan elemen bentuk yang dinonaktifkan (yang terkadang penting, tergantung pada bagaimana fungsi UI Anda)

Inilah jawaban saya dari pertanyaan SO lainnya:

Awalnya, kami menggunakan jQuery serializeArray() metode, tetapi itu tidak termasuk elemen formulir yang dinonaktifkan. Kami akan sering menonaktifkan elemen formulir yang "disinkronkan" ke sumber lain di halaman, tetapi kami masih perlu menyertakan data dalam objek serial kami. Begitu serializeArray()keluar. Kami menggunakan :input selektor untuk mendapatkan semua elemen input (diaktifkan dan dinonaktifkan) dalam wadah tertentu, dan kemudian $.map() untuk membuat objek kami.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Perhatikan bahwa agar ini berfungsi, setiap masukan Anda akan membutuhkan name atribut, yang akan menjadi nama properti dari objek yang dihasilkan.

Itu sebenarnya sedikit dimodifikasi dari yang kami gunakan. Kami perlu membuat objek yang terstruktur sebagai .NET IDictionary, jadi kami menggunakan ini: (Saya berikan di sini jika itu berguna)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

Saya suka kedua solusi ini, karena mereka menggunakan sederhana dari $.map() berfungsi, dan Anda memiliki kontrol penuh atas pemilih Anda (jadi, yang elemen Anda berakhir termasuk dalam objek yang dihasilkan Anda). Juga, tidak diperlukan plugin tambahan. JQuery lama biasa.


17



Fungsi ini harus menangani array multidimensi bersama dengan beberapa elemen dengan nama yang sama.

Saya telah menggunakannya selama beberapa tahun sejauh ini:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

16



Kamu bisa melakukan ini:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

Lihat JSON.


14