Как сериализовать форму в объект (с древовидной структурой)?

Question

У меня есть форма

<form>
    <input type="text" name="Name" />
    <input type="checkbox" name="Feature.Translate" />
    <input type="checkbox" name="Feature.Share" />

    <input type="submit" value="Convert into an object" />
</form>

Я хочу преобразовать ее в объект

{
    Name: "John Connor's Terminator",
    Feature:
    {
        Translate: true // if checked
        // Share wasn't checked
    }
}

Как мне сопоставить форму с объектом, который имеет эту древовидную структуру?

Answer 1

Должно работать что-то вроде следующего:

function serializeData() {
    //this is where we'll store our serialized data
    var serializedData = {};

    //iterate over input, select, and textarea elements
    jQuery("input, select, textarea").each(function(index) {
       var $element = jQuery(this);
       var name = $element.attr("name");

       //we only want to serialize the element if it has a 'name' attribute
       if(typeof name != "undefined") {

          //split on the . to get an array
          var parts = name.split(/\./);

          //start building the serialized data
          var currentPart = serializedData;
          for(var i = 0; i < parts.length; i++) {

              //if this particular element doesn't already exist in our hash, create it
              //and initialize it to an empty hash
              if(typeof serializedData[parts[i]] == "undefined") {
                  currentPart[parts[i]] = {};
              }

              //if we're currently looking at the very last element in the array then
              //it means that we need to set its value to the value of the corresponding
              //input element. Otherwise, it means that there are still keys within the
              //array and so we set `currentPart` to the new hash that we just created
              if(i == parts.length - 1) {

                  //if the element is a checkbox or a radio, we need to see if it's checked
                  //instead of looking at its value
                  if($element.attr("type").toLowerCase() == "checkbox" || $element.attr("type").toLowerCase() == "radio") {
                      currentPart[parts[i]] = $element.is(":checked");
                  }

                  else {
                     currentPart[parts[i]] = $element.val();
                  }
              }

              else {            
                  currentPart = currentPart[parts[i]];
              }                   
          }
       }
    });

    console.log(serializedData);
}

Проверьте скрипку .

Все, что вам нужно сделать сейчас, это связать serializeData с событием submit в форме.

Answer 2

Добавьте этот метод, чтобы помочь вам построить дерево

// add keys to an object as a tree
// ["a", "b", "c"] will generate
// a { b: { c: def } }
// def is the value of the leaf node
var AddToTree = function(obj, keys, def)
{
    for (var i = 0, length = keys.length; i < length; ++i)
        obj = obj[keys[i]] = i == length - 1 ? def : obj[keys[i]] || {};
};

Создать функцию для селектора jQuery, которая преобразует форму в объекте

$.fn.serializeObject = function()
{
   var o = {}; // final object
   var a = this.serializeArray(); // retrieves an array of all form values as
                                  // objects { name: "", value: "" }

   $.each(a, function() {
       var ns = this.name.split("."); // split name to get namespace
       AddToTree(o, ns, this.value); // creates a tree structure
                                     // with values in the namespace
   });

   return o;
};

С помощью этих двух функций определитеВы можете установить событие на кнопку отправки:

$(":submit").click(function(e){
    // contains the object from the form
    // respecting element namespaces
    var obj = $("form").serializeObject();
});