转换DOM元素到对象

Question

我有形式的值作为遵循

<input name="Document[0][category]" value="12" type="text"> 
<input name="Document[0][filename]" value="abca.png" type="text" > 

我想通过JS或jquery的将其序列的一个对象。

Document[0]={ 
    category : 12 
    filename : 'abca.png' 
}; 

我尝试使用serializeArray和解析到的对象，但没有很好的

Answer 1

低技术方法：

var Document = []; 
 
var inputs = document.querySelectorAll('input'); 
 
Array.prototype.forEach.call(inputs, function(input) { 
 
    var name = input.getAttribute('name'); 
 
    var prevProp = null; 
 
    var obj = Document; 
 
    name.replace(/\[(.*?)\]/g, function(m, prop) { 
 
    if (prevProp) obj = obj[prevProp] || (obj[prevProp] = {}); 
 
    prevProp = prop; 
 
    }); 
 
    obj[prevProp] = input.value; 
 
}); 
 
console.log(Document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input name="Document[0][category]" value="12" > 
 
<input name="Document[0][filename]" value="abca.png" > 
 
</form> 
 

 
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 --> 
 
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

编辑：作为guest271314音符，用Document作为变量名可能不是最伟大的想法。

Answer 2

检查了这一点

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

 
$(function() { 
 
    $('form').submit(function() { 
 
     $('#result').text(JSON.stringify($('form').serializeObject())); 
 
     return false; 
 
    }); 
 
});

form { 
 
    line-height: 2em; 
 
} 
 
p { 
 
    margin: 5px 0; 
 
} 
 
h2 { 
 
    margin: 10px 0; 
 
    font-size: 1.2em; 
 
    font-weight: bold 
 
} 
 
#result { 
 
    margin: 10px; 
 
    background: #eee; 
 
    padding: 10px; 
 
    height: 40px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2>Form</h2> 
 
<form action="" method="post"> 
 
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/> 
 
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/> 
 
Gender:<br/> 
 
Male:<input type="radio" name="gender" value="Male"/><br/> 
 
Female:<input type="radio" name="gender" value="Female"/><br/> 
 
Favorite Food:<br/> 
 
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/> 
 
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/> 
 
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/> 
 
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/> 
 
Select a Level of Education:<br/> 
 
<select name="education"> 
 
<option value="Jr.High">Jr.High</option> 
 
<option value="HighSchool">HighSchool</option> 
 
<option value="College">College</option></select><br/> 
 
Select your favorite time of day:<br/> 
 
<select size="3" name="TofD"> 
 
<option value="Morning">Morning</option> 
 
<option value="Day">Day</option> 
 
<option value="Night">Night</option></select> 
 
<p><input type="submit" /></p> 
 
</form> 
 
<h2>JSON</h2> 
 
<pre id="result"> 
 
</pre>

在这里找到：http://jsfiddle.net/sxGtM/3/

Answer 3

考虑jQue RY的serializeArray()功能：

var results = $("#some_id").serializeArray(); 

这会给你，你可以在JavaScript中工作对象的数组。我不认为你可以给这些对象的自定义名字，比如你想在这里做我假设：

<input name="Document[0][category]" value="12" type="text"> 
      ^^^^^^^^^^^ 

如果需要来命名这些结果，我建议用jQuery将其序列化，然后将该数据传输到您自己的对象。

Working Fiddle