title: How to send array of data to controller with ajax in laravel
body: <p>I want send arrays of data to back-end at once but i can't.</p>
  
  <h1>issue</h1>
  
  <p>1.
  this is what i send currently</p>
  
  <pre><code>array:5 [
    "_token" =&gt; "S5s5ZTTnnP93MyXgCql0l9vhHsiqt5VWaFyEedXj"
    "product_id" =&gt; "21"
    "specification_id" =&gt; "6"
    "text_dec" =&gt; "1"
    "longtext_dec" =&gt; null
  ]
  </code></pre>
  
  <p>It should be like:</p>
  
  <pre><code>Array [
    0 = [
      data
    ]
    1 = [
      data
    ]
    2 = [
      data
    ]
  ]
  </code></pre>
  
  <ol start="2">
  <li>I always get same <code>ID</code> as <code>specification_id</code> while each row in my blade has different <code>ID</code></li>
  </ol>
  
  <h1>Code</h1>
  
  <p><code>appending script</code></p>
  
  <pre><code>&lt;script defer&gt;
      $(document).ready(function() {
  //select the category
          $('select[name="selectset"]').on('change', function() {
              var id = $(this).val();
              if(id) {
                  $.ajax({
                      url: '{{ url('admin/selectset') }}/'+encodeURI(id),
                      type: "GET",
                      dataType: "json",
                      success:function(result) {
  //sort the results
                          result.sort(function(a,b) {
                              return (a.position &gt; b.position) ? 1 : ((b.position &gt; a.position) ? -1 : 0);
                          });
  
  
                          $.each(result, function(key1, value1) {
  
                              var vvvid = value1.id;
  
  //textfield and textareafield are part of my issue (appended rows)
                              if(value1['type'] == 'textfield'){
                                  var my_row = $('&lt;div class="row mt-20 ccin"&gt;');
                                  $('div#dataaa').append(my_row);
                              }else{
                                  var my_row = $('&lt;div class="row mt-20 ccin"&gt;');
                                  $('div#dataaa').append(my_row);
                              }
  
                              // second data (get values)
                              $.ajax({
                                  url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
                                  type: "GET",
                                  dataType: "json",
                                  success:function(data) {
                                      // Check result isnt empty
                                      var helpers = '';
                                      $.each(data, function(key, value) {
                                          helpers += '&lt;option value="'+value.id+'"&gt;'+value.title+'&lt;/option&gt;';
                                      });
  
  
  //this is the part of my issue
                                      if(value1['type'] == 'textfield'){
                                          var my_html = '{{ Form::open() }}&lt;input name="product_id" id="product_id" type="hidden" value="{{$product-&gt;id}}"&gt;&lt;input name="specification_idd" class="specification_idd" id="specification_idd" type="hidden" value="'+vvvid+'"&gt;&lt;div class="col-md-4"&gt;'+value1.title+'&lt;/div&gt;';
                                          my_html += '&lt;div class="col-md-6"&gt;&lt;input id="text_decc" name="text_decc" placeholder="text field" class="text_decc form-control"&gt;&lt;/div&gt;';
                                          my_html += '&lt;div class="col-md-2"&gt;&lt;button type="button" id="custmodalsaveee" class="custmodalsaveee btn btn-xs btn-success"&gt;Save&lt;/button&gt;{{Form::close()}}&lt;/div&gt;';
                                          my_row.html(my_html);
                                      }else{ //second part of my issue
                                          var my_html = '{{ Form::open() }}&lt;input name="product_id" id="product_id" type="hidden" value="{{$product-&gt;id}}"&gt;&lt;input name="specification_idd" class="specification_idd" id="specification_idd" type="hidden" value="'+vvvid+'"&gt;&lt;div class="col-md-4"&gt;'+value1.title+'&lt;/div&gt;';
                                          my_html += '&lt;div class="col-md-6"&gt;&lt;textarea id="longtext_decc" name="longtext_decc" placeholder="text area field" class="longtext_decc form-control"&gt;&lt;/textarea&gt;&lt;/div&gt;';
                                          my_html += '&lt;div class="col-md-2"&gt;&lt;button type="button" id="custmodalsaveee" class="custmodalsaveee btn btn-xs btn-success"&gt;Save&lt;/button&gt;{{Form::close()}}&lt;/div&gt;';
                                          my_row.html(my_html);
                                      }
  
  
                                  }
                              });
                              // second data
  
                          });
                      }
                  });
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>result of code above is like:</p>
  
  <p><a href="https://i.stack.imgur.com/sxqb1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sxqb1.png" alt="one"></a></p>
  
  <p><code>saving script</code> <strong>the part that should be fixed</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
    $("body").on("click", ".custmodalsaveee", function(e){
          var id = $('input[name="product_id"]').val();
  
          $.ajax({
            type: "post",
            url: "{{ url('admin/addnewcustomsubspecifications') }}",
            data: {
              '_token': $('input[name=_token]').val(),
              'product_id': id,
              'specification_id': $('.specification_idd').val(),
              'text_dec': $('.text_decc').val(),
              'longtext_dec': $('.longtext_decc').val(),
            },
            success: function (data) {
              alert('Specification added successfully in your product!');
            },
            error: function (data) {
              console.log('Error!', data);
            }
          });
    });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p><code>controller</code></p>
  
  <pre><code>public function addnewcustomsubspecifications(Request $reqss){
          dd($reqss-&gt;all());
  
      //   $this-&gt;validate($reqss, array(
      //     'product_id' =&gt; 'required',
      //     'specification_id' =&gt; 'required',
      //     'text_dec' =&gt; 'nullable',
      //     'longtext_dec' =&gt; 'nullable',
      //   ));
  
  
      //   $add = CustomProductSpecification::create([
      //       'product_id' =&gt; $reqss-&gt;product_id,
      //       'specification_id' =&gt; $reqss-&gt;specification_id,
      //       'text_dec' =&gt; $reqss-&gt;text_dec,
      //       'longtext_dec' =&gt; $reqss-&gt;longtext_dec,
      //   ]);
      //   $parent = Specification::where('id', '=', $reqss-&gt;specification_id)-&gt;first();
      //   return response()-&gt;json(array('data'=&gt;$add,'parent'=&gt;$parent));
  }
  </code></pre>
  
  <p>Any idea?</p>
  
  <h1>Update</h1>
  
  <p>html output</p>
  
  <p><a href="https://i.stack.imgur.com/eHlWH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eHlWH.png" alt="two"></a></p>
  
  <h1>Update2</h1>
  
  <p>So based on suggestions i've used <code>.map()</code> here is my code and the results</p>
  
  <p><code>script</code></p>
  
  <pre><code>$(document).ready(function() {
    $("body").on("click", ".custmodalsaveee", function(e){
          var id = $('input[name="product_id"]').val();
  
          var specification_idd = $( ".ccin" ).map(function() {
              return $( this ).find('.specification_idd').val();
              return $( this ).find('.text_decc').val();
              return $( this ).find('.longtext_decc').val();
          }).get();
          var text_decc = $( ".ccin" ).map(function() {
              return $( this ).find('.text_decc').val();
          }).get();
          var longtext_decc = $( ".ccin" ).map(function() {
              return $( this ).find('.longtext_decc').val();
          }).get();
    console.log(specification_idd);
    console.log(text_decc);
    console.log(longtext_decc);
  
          $.ajax({
  //rest of it as it was...
  </code></pre>
  
  <p>and the console results</p>
  
  <p><a href="https://i.stack.imgur.com/KlIDH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KlIDH.png" alt="three"></a></p>
  
  <h1>Question</h1>
  
  <ol>
  <li>How do i get related results together? <code>specification_id</code> and <code>text fields</code> as 1 array</li>
  <li>how I avoid of empty values? <strong>if <code>text_dec</code> and <code>longtext_dec</code> are empty for each <code>specification_id</code> doesn't need to be send</strong> <code>example</code> specification 40 doesn't have any value in <code>longtext_dec</code> or <code>text_dec</code> no need to be send</li>
  </ol>