jquery - JSON 返回未定义。 (通过 Laravel Controller 制作)

Question

你好，当我执行$('tbody').html(data.table_data);时，我有一个json数组；
在我的 ajax 中我得到以下返回

[{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}][{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]

并使用 data.total_data 我从我拥有的所有总记录中获取数字

好吧，所以每当我尝试输出此数据 *id:28,fname:tester 等时，我都会得到未定义的结果。

代码如下。

   function fetch_customer_data(query = '')
    {
        $.ajax({
            url:"{{ route('index.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(data)
            {
                var client_data = '';
                $.each(data,function (key,value) {
                    client_data += '<tr>';
                    client_data += '<td>' +value.id +'</td>';
                    client_data += '<td>' +value.fname+'</td>';
                    client_data += '<td>' +value.lname+'</td>';
                    client_data += '<td>' +value.email+'</td>';
                    client_data += '<td>' +value.phone+'</td>';
                    client_data += '<td>' +value.address+'</td>';
                    client_data += '<td>' +value.country+'</td>';
                    client_data += '<td>' +value.city+'</td>';
                    client_data += '<td>' +value.bday+'</td>';
                    client_data += '<td>' +value.username+'</td>';
                    client_data += '</tr>';
                })


                  $('tbody').html(cleint_data);

                $('#total_records').text(data.total_data);

            }
        })
    }

编辑:我不知道如何向您提供实际的回复，所以我做了退而求其次的事情。我将向您展示我是如何生成它的。也许这就是我的问题所在

function action(Request $request)
{
    if ($request->ajax()) {
        $output = '';
        $query = $request->get('query');
        if ($query != '') {
            $data = DB::table('users')->
            where('fname', 'like', '%' . $query . '%')
                ->orWhere('lname', 'like', '%' . $query . '%')
                ->orWhere('email', 'like', '%' . $query . '%')
                ->orWhere('phone', 'like', '%' . $query . '%')
                ->orWhere('address', 'like', '%' . $query . '%')
                ->orWhere('country', 'like', '%' . $query . '%')
                ->orWhere('city', 'like', '%' . $query . '%')
                ->orWhere('bday', 'like', '%' . $query . '%')
                ->orWhere('username', 'like', '%' . $query . '%')
                ->orWhere('access', 'like', '%' . $query . '%')
                ->orderBy('id', 'desc')
                ->get();
        } else {
            $data = DB::table('users')
                ->orderBy('id', 'asc')
                ->get();
        }
        $total_row = $data->count();
        if ($total_row > 0) {
            foreach ($data as $row) {
                $output .= $data;
            }
        } else {
            $output = '
   <tr>
    <td align="center" colspan="13">No Data Found</td>
   </tr>
   ';
        }
        $datas = array(
            'table_data' => $output,
            'total_data' => $total_row
        );

        echo json_encode($datas);
    }
}

编辑这里是 json 输出

 {table_data: "[{"id":28,"fname":"tester","lname":"testlast","pho…14 09:16:50","updated_at":"2018-10-14 12:51:26"}]", total_data: 2}
table_data: "[{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}][{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":29,"fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]"
total_data: 2

Answer 1

根据我的观察，你有两个错误， 1) 您的 Json 结果格式不正确。 2) 您正在添加 $('tbody').html(cleint_data);，其中拼写错误的是 client_data

$(document).ready(function(){
// Your json result has an error, So I corrected it and got the output. It has some unrecognized square brackets in the middle with one missing comma. check again
var yourData = jQuery.parseJSON('[{"id":"28","fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":"29","fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"},{"id":"28","fname":"tester","lname":"testlast","phone":"00000000","email":"test@email.com","address":"Tester 10","country":"TesterCountry","city":"TesterTown","bday":"2222-02-22","username":"admin","password":"1234","access":"Admin","created_at":"2018-10-13 16:34:22","updated_at":"2018-10-14 12:50:26"},{"id":"29","fname":"tester2","lname":"tester2last","phone":"11000000","email":"email2@test2.com","address":"Testaria 22","country":"TEsterio","city":"Testeriontiown","bday":"8812-09-08","username":"admin","password":"1234","access":"admin","created_at":"2018-10-14 09:16:50","updated_at":"2018-10-14 12:51:26"}]');

var client_data = '';
                $.each(yourData,function (key,value) {
                    client_data += '<tr>';
                    client_data += '<td>' +value.id +'</td>';
                    client_data += '<td>' +value.fname+'</td>';
                    client_data += '<td>' +value.lname+'</td>';
                    client_data += '<td>' +value.email+'</td>';
                    client_data += '<td>' +value.phone+'</td>';
                    client_data += '<td>' +value.address+'</td>';
                    client_data += '<td>' +value.country+'</td>';
                    client_data += '<td>' +value.city+'</td>';
                    client_data += '<td>' +value.bday+'</td>';
                    client_data += '<td>' +value.username+'</td>';
                    client_data += '</tr>';
                })


                  $('tbody').html(client_data);

             //   $('#total_records').text(data.total_data);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tbody>
</tbody>
</table>