Как отобразить мой JSON ответ в таблице, используя Laravel?

Question

Я пытаюсь создать Live поиск в Laravel, используя AJAX с одной из моих таблиц. Я смотрел видео на YouTube по этому поводу, и я подошел к 18:00 минутам на 21 минутном видео. В этот момент не было LIVE-поиска, но он смог просмотреть данные в своей таблице с помощью запроса AJAX. Хотя видео не было идеальным, я не вижу данных, отображаемых в моей таблице, я получаю ответ, я вижу данные на вкладке сети, на вкладке ответа моей консоли, но не могу увидеть их отображение на веб-странице, и я не получаю никаких других ошибок.

web. php:

Route::get('/admin/job-seeker/search', 'AdminJobSeekerSearchController@index')->name('admin.job.seeker.search.index')->middleware('verified');
Route::get('/admin/job-seeker/search/action', 'AdminJobSeekerSearchController@action')->name('admin.job.seeker.search.action')->middleware('verified');

AdminJobSeekerSearchController. php:

public function index()
    {
        return view('admin.job-seeker.search.index'));
    }

public function action(Request $request)
    {
        if($request->ajax())
        {
            $total_data = '';
            $output = '';

            $query = $request->get('query');
            if($query != '')
            {
                $data = DB::table('employer_profiles')
                    ->where('company_name', 'like', '%'.$query.'%')
                    ->orWhere('company_address', 'like', '%'.$query.'%')
                    ->orWhere('immediate_contact', 'like', '%'.$query.'%')
                    ->get();
            }
            else
            {
                $data = DB::table('employer_profiles')
                    ->orderBy('id', 'desc')
                    ->get();
            }

            $total_row = $data->count();

            if($total_row > 0)
            {
                foreach($data as $row)
                {
                    $output .= '
                    <tr>
                        <td>'.$row->company_name.'</td>
                        <td>'.$row->company_address.'</td>
                        <td>'.$row->immediate_contact.'</td>
                    </tr>
                    ';
                }
            }
            else
            {
                $output = '
                <tr>
                    <td colspan="5">No Data Found</td>
                </tr>
                ';
            }
            $data = array(
                'table_data' => $output,
                'total_data' => $total_row
            );

            $str_data = implode(" ", $data);

            echo $str_data;
        }
    }

index.blade:

@extends('layouts.admin')

@section('content')

    @if (session('send-profile'))
        <div class="alert alert-success">
            {{ session('send-profile') }}
        </div>
    @endif

    <div class="row">

        <div class="col-md-12">
            <!-- Topbar Search -->
            <form class="navbar-search">
                <div class="input-group">
                    <input type="text" class="form-control bg-lightblue border-0 small text-white border-dark" name="search" id="search" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-success" type="button">
                            <i class="fas fa-cannabis"></i>
                        </button>
                    </div>
                </div>
            </form><br>
        </div>

        <div class="col-md-12">

                <table class="table table-hover table-responsive-sm">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">Total Data : <span id="total_records"></span></th>
                        <th scope="col">Company Name</th>
                        <th scope="col">Immediate Contact</th>
                        <th scope="col">Address</th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

        </div>

    </div>

@stop

@push('scripts')
    <script>

        $(document).ready(function() {

            fetch_customer_data();

            function fetch_customer_data(query = '')
            {

                $.ajax({
                    url:"{{ route('admin.job.seeker.search.action') }}",
                    method: 'GET',
                    data: {query:query},
                    dataType:'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(data)
                    {
                        $('tbody').html(data.table_data);
                        $('#total_records').text(data.total_data);
                    }
                })

            }

        });

    </script>
@endpush

Данные из таблицы должны отображаться внутри тегов <tbody></tbody>. Ниже приведен скриншот данных на вкладке «Моя сеть», на вкладке «Ответ» в консоли.

Answer 1

Попробуйте вернуть массив $ data следующим образом:

return response () -> json ($ data);