title: Form serializeArray get key:value if key is nested array in HTML?
body: <p>I have a form like this:</p>
  
  <pre><code>&lt;select name="dog[0][name]"&gt;...&lt;/select&gt;
  &lt;select name="dog[0][color]"&gt;...&lt;/select&gt;
  &lt;select name="dog[0][height]"&gt;...&lt;/select&gt;
  &lt;select name="dog[0][weight]"&gt;...&lt;/select&gt;
  
  &lt;select name="dog[1][name]"&gt;...&lt;/select&gt;
  &lt;select name="dog[1][color]"&gt;...&lt;/select&gt;
  &lt;select name="dog[1][height]"&gt;...&lt;/select&gt;
  &lt;select name="dog[1][weight]"&gt;...&lt;/select&gt;
  ...
  </code></pre>
  
  <p>Now, if I call <code>$('form').serializeArray();</code> on this the output is like this:</p>
  
  <pre><code>[
      {
          name: "dog[0][name]",
          value: "ABC"
      },
      {
          name: "dog[0][color]",
          value: "Blue"
      },
      {
          name: "dog[0][height]",
          value: "41"
      },
      {
           name: "dog[0][weight]",
          value: "10"
      },
      {
          name: "dog[1][name]",
          value: "XYZ"
      },
      {
          name: "dog[1][color]",
          value: "Pink"
      },
      {
          name: "dog[1][height]",
          value: "27"
      },
      {
          name: "dog[1][weight]",
          value: "7"
      },
      // ...
  ]
  </code></pre>
  
  <p>How can I make this to be like:</p>
  
  <pre><code>{
      dog: [
          0: {"name": "ABC", "color": "Blue", "height": 41, "weight": "10"}
          1: {"name": "XYZ", "color": "Pink", "height": 27, "weight": "7"}
      ]
  }
  </code></pre>
  
  <p>? Is there a way that won't require nested loops?</p>