web-dev-qa-db-ja.com

jQuery serializeArray（）キーと値のペア

フォームのシリアル化に少し問題があります

<form>
    <input type="text" name="name1" value="value1"/>
    <input type="text" name="name2" value="value2"/>
</form>

$(form).serializeArray()

戻ります [{name:"name1",value:"value1"},{name:"name2",value:"value2"}]ペア。

フォームで出力を取得することは可能ですか

{name1:value1,name2:value2}

彼らが扱いやすいように？

jqueryserialization
37
Akshat
var result = { };
$.each($('form').serializeArray(), function() {
    result[this.name] = this.value;
});

// at this stage the result object will look as expected so you could use it
alert('name1 = ' + result.name1 + ', name2 = ' + result.name2);

ライブデモ

67
Darin Dimitrov
$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }      
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
36
Luka Govedič

フォームにチェックボックスまたはラジオボタンがない場合、受け入れられた回答は非常に効果的です。これらのグループはすべて同じ名前属性を持っているため、オブジェクト内に配列値を作成する必要があります。したがって、HTMLの場合：

<input type="checkbox" value="1" name="the-checkbox">
<input type="checkbox" value="1" name="the-checkbox">
<input type="checkbox" value="1" name="the-checkbox">

以下が得られます：

{the-checkbox:['1', '2', '3']}

これ コードのビットはすべてをうまく処理します。

/*!
 * jQuery serializeObject - v0.2 - 1/20/2010
 * http://benalman.com/projects/jquery-misc-plugins/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

// Whereas .serializeArray() serializes a form into an array, .serializeObject()
// serializes a form into an (arguably more useful) object.

(function($,undefined){
  '$:nomunge'; // Used by YUI compressor.

  $.fn.serializeObject = function(){
    var obj = {};

    $.each( this.serializeArray(), function(i,o){
      var n = o.name,
        v = o.value;

        obj[n] = obj[n] === undefined ? v
          : $.isArray( obj[n] ) ? obj[n].concat( v )
          : [ obj[n], v ];
    });

    return obj;
  };

})(jQuery);

使用法

$(form).serializeObject();
23
Hollister
new_obj = {}

$.each($(form).serializeArray(), function(i, obj) { new_obj[obj.name] = obj.value })

データはnew_objにあります

4
Erez Rabih

カスタム関数を作成できます。

var complex = $(form).serialize(); // name1=value1&name2=value2
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"}

function toSimpleJson(serializedData) {
    var ar1 = serializedData.split("&");
    var json = "{";
    for (var i = 0; i<ar1.length; i++) {
        var ar2 = ar1[i].split("=");
        json += i > 0 ? ", " : "";
        json += "\"" + ar2[0] + "\" : ";
        json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
    }
    json += "}";
    return json;
}
3
Mr. Mak

Hollister のコードの最新化です。

(function($,undefined){
  '$:nomunge'; // Used by YUI compressor.

  $.fn.serializeObject = function(){
    var obj = {},
        names = {};

    $.each( this.serializeArray(), function(i,o){
      var n = o.name,
        v = o.value;

        if ( n.includes( '[]' ) ) {
          names.n = !names.n ? 1 : names.n+1;
          var indx = names.n - 1;
          n = n.replace( '[]', '[' + indx + ']' );
        }

        obj[n] = obj[n] === undefined ? v
          : $.isArray( obj[n] ) ? obj[n].concat( v )
          : [ obj[n], v ];
    });

    return obj;
  };

})(jQuery);

チェックボックスにmyvar[]としてフィールド名が必要な場合。

2
Vitaliy Maschenko

これは、.reduce()を使用して割り当てを破壊するだけで簡単に行えます。

const arr = $('form').serializeArray(); // get the array
const data = arr.reduce((acc, {name, value}) => ({...acc, [name]: value}),{}); // form the object

例：

$('form').on('submit', function(e) {
  e.preventDefault(); // only used for example (so you can see output in console);
  const arr = $(this).serializeArray(); // get the array
  const data = arr.reduce((acc, {name, value}) => ({...acc, [name]: value}),{}); // form the object
  console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" placeholder="username" name="username"/>
  <input type="email" placeholder="email" name="email"/>
  <input type="submit" />
</form>
0
Nick Parsons

これがラジオボタンと複数選択をサポートする私のソリューションです。

var data = $('#my_form').serializeArray().reduce(function (newData, item) {
    // Treat Arrays
    if (item.name.substring(item.name.length - 2) === '[]') {
        var key = item.name.substring(0, item.name.length);
        if(typeof(newData[key]) === 'undefined') {
            newData[key] = [];
        }
        newData[key].Push(item.value);
    } else {
        newData[item.name] = item.value;
    }
    return newData;
}, {});

console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="my_form">
  <select name="muli_select[]" multiple="multiple">
    <option value="1" selected>Value 1</option>
    <option value="2" selected>Value 2</option>
    <option value="3">Value 3 Not selected</option>
  </select>
  <br>
  <input name="my_text" type="hidden" value="Hidden Text"/>
  <input name="my_text2" type="text" value="Shown Text"/>
  <br>
  
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female
</form>
0
Lukas Labryszewski

値を持つフォーム入力のみを取得するには...

var criteria = $(this).find('input, select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serializeArray();

基準：{名前： "ラストネーム"、値： "スミス"}

0
Greg Bologna

フォームにid（form-id）を与えます

var jsoNform = $("#form-id").serializeObject();

jQuery.fn.serializeObject = function () {
    var formData = {};
    var formArray = this.serializeArray();
    for (var i = 0, n = formArray.length; i < n; ++i)
         formData[formArray[i].name] = formArray[i].value;
     return formData;
};
0
Tina