How to display my JSON response in a table using Laravel?

I’m trying to create Live search in Laravel using AJAX with one of my tables. I watched a YouTube video on this and I got to around 18:00 min on the 21 minute video. At this point there was no LIVE search, but he was able to view the data in his table through the AJAX request. While the video wasn’t perfect, I wasn’t seeing the data appear in my table, I am getting the response, I see the data in the network tab, in the response tab of my console, but am unable to see it displayed on the web page, and I’m not getting any other errors.

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

The data from the table is supposed to be displayed inside of the <tbody></tbody> tags. Below is a screenshot of the data in my network tab, in the response tab in my console.

Answer

Try to return the $data array like this:

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

Advertisement

Answer