将 JSON 数据（通过使用 Ajax ）传递给视图 Laravel 中的 table

Question

我是 Laravel 的新手，正在尝试自学内部项目。

正在尝试将 json 数据传递给 table 以在其中显示数据。 json 中收到的数据正常，但无法将其放入 Table

控制器：

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 文件

              $('#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>

您的指导对我很有帮助......

Answer 1

您只需要在成功事件上操作 DOM。我们正在获取第一个 tbody 元素并向其添加更多元素。

这是更新后的代码 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);
                }

            },  
        });
    });

将 JSON 数据（通过使用 Ajax ）传递给视图 Laravel 中的 table

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

ajax

laravel