I want to key and values using push array using jquery and laravel

Question

Array push in jquery with key and value.When i use below code getting [object Object]. How to fix it? Laravel:

public function store(Request $request){
  $add_new_services_arr = json_decode($request['all_checked_services_arr']);
  if(!empty($add_new_services_arr)){
    foreach ($add_new_services_arr as $key => $value) {
      $lab_services_obj = new Services;
      $lab_services_obj->user_id = $userId;
      $lab_services_obj->service_name = $value->service_name;
      $lab_services_obj->price = $value->service_price;
      $lab_services_obj->save();
    }
  }

jQuery

 var all_checked_inputs = $('#list_add_services_div .service input[type=checkbox]:checked');
 var all_checked_services_arr = [];
 $(all_checked_inputs).each(function() {
   var service_name = $(this).attr('service_name');
   var service_price = $(this).attr('service_price');
   all_checked_services_arr.push({
     service_name: service_name,
     service_price: service_price,
   });
 });
        console.log('hello', all_checked_services_arr);

Ajax:

var form = $('#add_lab_form_id')[0];
var formData = new FormData(form);
// formData.append('add_new_services_arr', JSON.stringify(add_new_services_arr));
formData.append('all_checked_services_arr', all_checked_services_arr);
//console.log(formData);
$.ajax({
  url: site_url + '/Laboratory/StoreAjax',
  type: 'POST',
  // contentType: "application/json;", // for passing array to the ajax
  // data: JSON.stringify(all_checked_services_arr),
  data: formData,

  success: function(response) {
    console.log('response', response);
    if (response.status == "success") {
      toastr.success('Record added successfully.');
      window.location.href = site_url + '/Laboratory/List';
    } else if (response.status == "false") {
      toastr.warning('Record not added.');
    } else if (response.status == 'error' && response.code == 402) {
      console.log('response', response.errors);
      toastr.error(response.message);
    }
  },
  cache: false,
  contentType: false,
  processData: false
});

Whenever I console this getting :"all_checked_services_arr" => "[object Object]"

You confuse us with the "console" - you mean you are getting `:"all_checked_services_arr" => "[object Object]"` on the SERVER. If that is the case, post the part where you send your array to the server. I would suggest JSON — mplungjan, Jan 22 '21 at 10:02
You already knew something was wrong with this statement `formData.append('all_checked_services_arr', all_checked_services_arr);` when you look at `// formData.append('add_new_services_arr', JSON.stringify(add_new_services_arr));` — mplungjan, Jan 22 '21 at 10:29

mplungjan · Accepted Answer · 2021-01-22T10:33:20.547

formData.append('add_new_services_arr', JSON.stringify(add_new_services_arr));

But you can simplify the creation

const all_checked_services_arr = $('#list_add_services_div .service input[type=checkbox]:checked').map(function() {
  return {
    service_name: $(this).attr('service_name'),
    service_price: $(this).attr('service_price')
  }
}).get();

console.log(all_checked_services_arr)

console.log(JSON.stringify(all_checked_services_arr))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list_add_services_div">
  <div class="service">
    <input type="checkbox" service_name="name1" service_price="$1" checked />
    <input type="checkbox" service_name="name2" service_price="$2" />
    <input type="checkbox" service_name="name3" service_price="$3" checked />
  </div>
</div>

I would however use data-attributes and not custom attributes

const all_checked_services_arr = $('#list_add_services_div .service input[type=checkbox]:checked').map(function() {
  return {
    service_name: $(this).data('name'),
    service_price: $(this).data('price')
  }
}).get();

console.log(all_checked_services_arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list_add_services_div">
  <div class="service">
    <input type="checkbox" data-name="name1" data-price="$1" checked />
    <input type="checkbox" data-name="name2" data-price="$2" />
    <input type="checkbox" data-name="name3" data-price="$3" checked />
  </div>
</div>

Still getting error : "all_checked_services_arr" => "[object Object]" — jandial nidhi, Jan 22 '21 at 09:57
Or are you talking about when you submit? Then you need to elaborate on how you send this to the server — mplungjan, Jan 22 '21 at 09:58
That is completely unclear. You need to post the part where you submit. I assume you are Ajaxing? — mplungjan, Jan 22 '21 at 10:01

I want to key and values using push array using jquery and laravel

1 Answers1