Pass data form controller to ajax and modal laravel 8 - php

Question

I tried to pass data from controller to ajax but data didnt come to my modal
This My Controller :
public function grd_checkout($paket)
{
$data= Voucher::where([
['paket',$paket],
['lokasi','GRD.NET']
])->count();
return response()->json([
'stok' => $data,
]);
}
This My Route :
Route::get('menu/grd_checkout/{paket}', [MenuController::class, 'grd_checkout']);
Button :
<td align="center" >
<button type="button" class="btn btn-primary" data-id="{{ $voucher->paket }}"
data-bs-toggle="modal" data-bs-target="#myModal">Beli
</button>
</td>
This My Form Modal :
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content modal-sm">
<div class="modal-header">
<h5 class="modal-title" id="myModalLongTitle">Isi Data Diri dan Jumlah Pemesanan</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-sm-6">
Stok Voucher Tersedia : <p id="stok"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
This My Ajax :
<script>
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
let paket = $(this).data('id');
$.ajax({
url: '/menu/grd_checkout/' + paket,
type: 'GET',
success: function(data) {
$('#stok').text(data.stok);
}
});
});
</script>
Please kinda help to solve my error, the "stok" didnt shown up in modal, Thanks for helping!

Answer 1

Kindly check the response of the API and if it's okay then kindly try this:
<script>
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
let paket = $(this).data('id');
$.ajax({
url: '/menu/grd_checkout/' + paket,
type: 'GET',
success: function(data) {
$(document).find('#stok').html(data.stok);
}
});
});
</script>