After making an AJAX request, I expected the results to display when I select from the drop down menu. However, I encountered a problem where only a table is being displayed. I am confused as to why the data is not coming from the variables $grade (calculation of grade) and $value (calculation of total value).
Upon trying to retrieve the element $grade, I found that it is undefined.
<script type="text/javascript>
$(document).ready(function(){
$('#kategori').on('change', function(e){
var id = e.target.value;
$.get('/khs/khs_semester/' + id, function(data){
console.log(id);
console.log(data);
$('#khs').empty();
$.each(data, function(index, element){
$('#khs').append("<tr><td>" + element.kode_mk + "</td><td>" + element.nama_mk + "</td>" + "<td>" + element.semester + "</td><td>" + element.jml_sks + "</td><td>" + element.$grade + "</td></tr>");
});
});
});
});
</script><table class="table table-bordered>
<thead>
<tr>
<th width="100">KODE MK</th>
<th width="350">NAMA MK</th>
<th width="50">SEMESTER</th>
<th width="50">SKS</th>
<th width="50">GRADE</th>
</tr>
</thead>
<tbody id="khs">
@foreach($mahasiswa as $row)
@php
$nilai = hitung_nilai($row->id);
$grade = hitung_grade($nilai);
$mutu = hitung_mutu($grade);
@endphp
<tr>
<td>{{ $row->kode_mk }}</td>
<td>{{ $row->nama_mk }}</td>
<td>{{ $row->semester }}</td>
<td>{{ $row->jml_sks}}</td>
<td>{{ $grade }}</td>
<td>{{ $mutu*$row->jml_sks }}</td>
</tr>
@php
$totalSKS=$totalSKS+$row->jml_sks;
$totalMutu = $totalMutu+$mutu*$row->jml_sks;
@endphp
@endforeach
</tbody>
</table>