Pass JSON data (by using Ajax ) to table in View Laravel - ajax

Question

I am new to Laravel and trying to self learn the same for inhouse project.
Trying to pass json data to table for showing the data in the same. Data received in json is ok but not able to put the same in Table
Controller:
public function getmilkrecordforbid(Request $req)
{
$bidformilk = $req->bidformilkrecord;
$bmilkrecord = buffalomilkrecord::where('buffaloID', '=', $bidformilk)-
>get();
return ($bmilkrecord);
}
web.php
Route::post('/getmilkrecordforbid'[BuffalodataController::class,'getmilkrecordforbid'])
ajax file
$('#selectid').on('change', function() {
var bidformilkrecord = $('#selectid').val();
$.ajax({
url : '/getmilkrecordforbid',
dataType : "json",
method : "POST",
data : {'bidformilkrecord': bidformilkrecord, "_token":"{{
csrf_token()}}"},
success: function(data){
console.log(data)
console.log(data.length)
},
});
});
console.log
(4) [{…}, {…}, {…}, {…}]0: {id: 5, buffaloID: 'Buffalo-02', date: '2020-12-15', milkmorning: '5.00', milkevening: '6.00', …}1: {id: 6, buffaloID: 'Buffalo-02', date: '2020-12-16', milkmorning: '5.00', milkevening: '5.00', …}2: {id: 7, buffaloID: 'Buffalo-02', date: '2020-12-17', milkmorning: '5.00', milkevening: '5.00', …}3: {id: 8, buffaloID: 'Buffalo-02', date: '2020-12-18', milkmorning: '5.00', milkevening: '5.00', …}length: 4[[Prototype]]: Array(0)
Table html
<table id="milksummery" class="table table-bordered table-hover table"
style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Morning Milk</th>
th>Evening Milk</th>
<th>Total Milk</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your guidance will really help me.......

Answer 1

You just need to manipulate the DOM on the success event. We are getting the first tbody element and adding more elements to it.
Here it is your code with the updated DOM.
$('#selectid').on('change', function() {
var bidformilkrecord = $('#selectid').val();
$.ajax({
url : '/getmilkrecordforbid',
dataType : "json",
method : "POST",
data : {
'bidformilkrecord': bidformilkrecord,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
console.log(data.length)
let tbody = document.getElementsByTagName("tbody")[0];
for (let i = 0; i < data.length; i++) {
let milkSummeryRow = tbody.insertRow();
let dateCell = milkSummeryRow.insertCell();
let dateText = document.createTextNode(data[i]['date']);
dateCell.appendChild(dateText);
let milkMorningCell = milkSummeryRow.insertCell();
let milkMorningText = document.createTextNode(data[i]['milkmorning']);
milkMorningCell.appendChild(milkMorningText);
let milkEveningCell = milkSummeryRow.insertCell();
let milkEveningText = document.createTextNode(data[i]['milkevening']);
milkEveningCell.appendChild(milkEveningText);
let milkTotalCell = milkSummeryRow.insertCell();
let milkTotalText = document.createTextNode(parseFloat(data[i]['milkmorning']) + parseFloat(data[i]['milkevening']));
milkTotalCell.appendChild(milkTotalText);
}
},
});
});