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"  
             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.......

CodePudding user response：

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);
                }

            },  
        });
    });