javascript - Ajax send array of data to backend

Question

I have table where I loop dynamic data and each of those dynamic items has input fields then I send those input fields along with dynamic items id to back-end.

Issue

Issue is that my fields in ajax giving me strange data as array.

Code

$(function() {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });
  $('.newservicesSave').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var idmess = $(this).data("id");


    // this array data are wrong
    var newservices = [];
    $(".newservices").each(function() {
      newservices.push($(this).val());
    });

    console.log('newservices: ', newservices);

    $.ajax({
      url: '{{ url('
      panel / addnewservices ') }}/' + encodeURI(idmess),
      type: 'POST',
      dataType: "JSON",
      data: {
        "id": idmess,
        "newservices": newservices,
        "_method": 'POST',
        "_token": "{{ csrf_token() }}",
      },
      success: function(data) {
        $('#servicesTable').empty();
        $.each(data.data, function(key, value) {
          $("#servicesTable").append('<tr><td>' + value['name'] + '</td><td><textarea name="' + services['key']['description'] + '" class="form-control" name="description"></textarea><input type="hidden" name="' + services['key']['service_id'] + '"/></td><td><input type="text" class="form-control" placeholder="Harga" name="' + services['key']['price'] + '"/></td><td><input class="form-checkbox" type="checkbox" name="' + services['key']['active'] + '" /></td></tr>');
        });
      }
    });
  });
});

<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Service</th>
      <th>Description</th>
      <th>Harga</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
    @foreach($services as $index => $service)
    <tr>
      <td>{{$service->name}}</td>
      <td>
        <textarea name="newservices[{{$index}}][description]" class="newservices form-control" name="description"></textarea>
        <input type="hidden" class="newservices" name="newservices[{{$index}}][service_id]" />
      </td>
      <td>
        <input type="text" class="newservices form-control" placeholder="Harga" name="newservices[{{$index}}][price]" />
      </td>
      <td><input class="newservices form-checkbox" type="checkbox" name="newservices[{{$index}}][active]" /></td>
    </tr>
    @endforeach
  </tbody>
</table>
<button type="button" data-id="{{$laundry->id}}" class="newservicesSave btn btn-primary">Save changes</button>

question from:https://stackoverflow.com/questions/65838585/ajax-send-array-of-data-to-backend

Answer 1

To get the structure you want you will need to loop over rows and create an object for each row

Try something like :

var newservices = $('#myTable tbody tr').map(function(){
    var $row = $(this);
    return {
        description: $row.find('.newservices[name*="description"]').val(),
        service_id : $row.find('.newservices[name*="service_id"]').val(),
        // ... same for other properties
    }    
}).get();