title: Adding an array of objects to form data
body: <p>The following scripts create the desired submission to PHP:</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;form id="myform"&gt;
              &lt;input type="text" value="Name 1" name="name1"&gt;
              &lt;input type="text" value="Name 2" name="name2"&gt;
              &lt;input type="text" value="Name 3" name="name3"&gt;
  
              &lt;input type="text" value="Series 0 name" name="series[0][name]"&gt;
              &lt;input type="text" value="Series 0 position" name="series[0][position]"&gt;
              &lt;input type="text" value="Series 0 id" name="series[0][id]"&gt;
  
              &lt;input type="text" value="Series 1 name" name="series[1][name]"&gt;
              &lt;input type="text" value="Series 1 position" name="series[1][position]"&gt;
              &lt;input type="text" value="Series 1 id" name="series[1][id]"&gt;
  
              &lt;input type="text" value="Series 2 name" name="series[2][name]"&gt;
              &lt;input type="text" value="Series 2 position" name="series[2][position]"&gt;
              &lt;input type="text" value="Series 2 id" name="series[2][id]"&gt;
  
              &lt;input type="submit"&gt;
          &lt;/form&gt;
          &lt;form id="form2"&gt;
              &lt;input type="text" value="Name 1" name="name1"&gt;
              &lt;input type="text" value="Name 2" name="name2"&gt;
              &lt;input type="text" value="Name 3" name="name3"&gt;
  
              &lt;input type="submit"&gt;
          &lt;/form&gt;
          &lt;script type="text/javascript"&gt;
              $(function(){
                  function ajaxTest(data) {
                      console.log(data);
                      $.ajax({
                          type: "POST",
                          url: "testajax.php",
                          data: data,
                          dataType: 'json',
                          success: function (rsp){
                              console.log(rsp);
                          }
                      });
                  }
                  ajaxTest($('#myform').serializeArray());
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>testajax.php</p>
  
  <pre><code>&lt;?php
  ob_start();
  var_dump($_POST);
  syslog(LOG_INFO, ob_get_clean());
  echo(json_encode($_POST));
  </code></pre>
  
  <p>syslog</p>
  
  <pre><code>array(4) {
     ["name1"]=&gt;
     string(6) "Name 1"
     ["name2"]=&gt;
     string(6) "Name 2"
     ["name3"]=&gt;
     string(6) "Name 3"
     ["series"]=&gt;
     array(3) {
       [0]=&gt;
       array(3) {
         ["name"]=&gt;
         string(13) "Series 0 name"
         ["position"]=&gt;
         string(17) "Series 0 position"
         ["id"]=&gt;
         string(11) "Series 0 id"
       }
       [1]=&gt;
       array(3) {
         ["name"]=&gt;
         string(13) "Series 1 name"
         ["position"]=&gt;
         string(17) "Series 1 position"
         ["id"]=&gt;
         string(11) "Series 1 id"
       }
       [2]=&gt;
       array(3) {
         ["name"]=&gt;
         string(13) "Series 2 name"
         ["position"]=&gt;
         string(17) "Series 2 position"
         ["id"]=&gt;
         string(11) "Series 2 id"
       }
     }
   }
  </code></pre>
  
  <p>But in reality, my form doesn't have all the series data and instead it is held in a JavaScript array of objects.  How can I post it along with the form data?  I don't wish to use <code>JSON.stringify</code> as it requires decoding at the server.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;form id="myform"&gt;
              &lt;input type="text" value="Name 1" name="name1"&gt;
              &lt;input type="text" value="Name 2" name="name2"&gt;
              &lt;input type="text" value="Name 3" name="name3"&gt;
  
              &lt;input type="submit"&gt;
          &lt;/form&gt;
          &lt;form id="form2"&gt;
              &lt;input type="text" value="Name 1" name="name1"&gt;
              &lt;input type="text" value="Name 2" name="name2"&gt;
              &lt;input type="text" value="Name 3" name="name3"&gt;
  
              &lt;input type="submit"&gt;
          &lt;/form&gt;
          &lt;script type="text/javascript"&gt;
              $(function(){
                  function ajaxTest(data) {
                      console.log(data);
                      $.ajax({
                          type: "POST",
                          url: "testajax.php",
                          data: data,
                          dataType: 'json',
                          success: function (rsp){
                              console.log(rsp);
                          }
                      });
                  }
                  var series=[
                      {name:'Series 1 name', position:'Series 1 position', id:'Series 1 id'},
                      {name:'Series 2 name', position:'Series 2 position', id:'Series 2 id'},
                      {name:'Series 3 name', position:'Series 3 position', id:'Series 3 id'}
                  ]
                  var formData=$('#form2').serializeArray();
                  formData.push({name: 'series', value: series});
                  ajaxTest(formData);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>