Converting DOM elements into Objects

Question

I have values of form as follow

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

I want to serialize it to an object by js or jquery.

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

I try use serializeArray and parse to object but no good

Answer 1

Low-tech method:

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>

EDIT: as guest271314 notes, using Document as a variable name might not be the greatest idea.