title: Deserialize FORM hierarchical structure to JS object
body: <p>I have a <em>form</em> with controls that have <strong>names representing a hierarchical structure</strong>.</p>
  
  <h3>Example</h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;input name="[field1][0][field11]" value="foobar1" /&gt;
      &lt;input name="[field1][0][field12][0][field121]" value="foobar2" /&gt;
      &lt;input name="[field2]" value="foobar3" /&gt;
      &lt;input name="[field3][0][field31]" value="foobar4" /&gt;
      &lt;input name="[field3][1][field32][0][field321]" value="foobar5" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to obtain an <strong>Object</strong> representing the hierarchy, like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      "field1": [
          {
              "field11": "foobar1",
              "fiedl12": [
                  {
                      "field121": "foobar2"
                  }
              ]
          }
      ],
      "field2": "foobar3",
      "field3": [
          {
              "field31": "foobar4"
          },
          {
              "field32": [
                  {
                      "field321": "foobar5"
                  }
              ]
          }
      ]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to obtain that? Is there any native JS or <em>jQuery</em> function to achieve this? (<em>.serializeArray()</em> is not helping here)</p>
  
  <hr>
  
  <p>Just the name structure is standard, the actual names will not have indexes like <em>field-<strong>12</strong></em> or <em>field-<strong>321</strong></em> (the only indexes are into the second square brackets of the pattern "<strong>[field][index]</strong>".</p>
  
  <p><strong>[field]</strong> corresponds to a normal string value (when no <em>[index]</em> is present) or to an array (when the <em>[index]</em> is there).</p>
  
  <p><strong>[index]</strong> always corresponds to a new <strong>Object</strong> (<code>{}</code>) having the properties defined in the following <code>[]</code>-brackets set.</p>
  
  <p>PS - Please no <em>jQuery</em> plugins</p>