[javascript] jQuery를 사용하여 양식 데이터를 JavaScript 객체로 변환

Program / 글쓴이

양식의 모든 요소를 ​​JavaScript 객체로 어떻게 변환합니까?

각 요소를 반복하지 않고도 양식에서 JavaScript 객체를 자동으로 작성하는 방법을 원합니다. 에서 반환 한 문자열을 원하지 $('#formid').serialize();않거나 맵을 반환하지 않습니다.$('#formid').serializeArray();

답변

serializeArray이미 정확히 그렇게합니다. 필요한 형식으로 데이터를 마사지하면됩니다.

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

실제 입력과 동일한 이름을 가진 숨겨진 필드를 덮어 씁니다.

답변

보스처럼 양식을 JSON으로 변환

현재 소스는 GitHub 및 Bower에 있습니다.

$ bower 설치 jquery-serialize-object

다음 코드는 더 이상 사용되지 않습니다 .

다음 코드는 모든 종류의 입력 이름으로 작동 할 수 있습니다. 예상대로 처리하십시오.

예를 들면 다음과 같습니다.

<!-- 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"
          }
        }
      }
    }
  }
}

용법

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

마법 (자바 스크립트)

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

답변

무엇이 잘못 되었나요? 

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

답변

Tobias Cohen 솔루션의 고정 버전. 이 사람은 정확하게 같은 falsy 값 처리 0및 ''.

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

코딩 편의성을위한 CoffeeScript 버전 :

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

답변

나는 Array.prototype.reduce하나의 라이너이기 때문에 사용하는 것을 좋아 하며 Underscore.js 등에 의존하지 않습니다 .

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

이것은을 사용하는 답변과 비슷 Array.prototype.map하지만 추가 객체 변수로 범위를 어지럽 힐 필요는 없습니다. 원 스톱 쇼핑.

중요 사항 : name속성이 중복 된 입력이있는 양식 은 유효한 HTML이며 실제로는 일반적인 접근 방식입니다. 이 경우 스레드에서 답을 사용하는 것은 부적절합니다 (객체 키가 고유해야하기 때문에).

답변

이 모든 대답은 나에게 너무나 위대해 보였다. 간단하게 말해야 할 것이 있습니다. 모든 양식 입력에 이름 속성이 설정되어 있으면 짐 댄디가 작동합니다.

$('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?)
});

답변

각 요소를 검사하지 않고는 실제로이를 수행 할 방법이 없습니다. 정말로 알고 싶은 것은 “다른 사람이 이미 양식을 JSON 객체로 변환하는 메소드를 작성 했습니까?”입니다. 다음과 같은 것이 작동해야합니다-POST를 통해 반환되는 양식 요소 만 제공합니다 (이름이 있어야 함). 이것은 테스트되지 않았습니다 .

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