How to fix my problem, the data that I get from database using ajax would not appear on bootstrap modal

I have this code in youtube I followed and in some point it works without laravel but when i used it in laravel it got some problem. Im trying to edit/update the data from the table(html) using modal but the problem is the data that i got in my database(mysql) does not appearing in modal, the only data that appears is the ID of the item in the table. Also, when i print the data on console it gives me the correct data. Ive spent so much time looking for the problem and solution but still i cant move on so i tried to post here. Hope someone can help me. It would be a great-great help. THANK YOU!

#### THE BLADE FILE/HTML

<div class="modal fade" id="customerEditModal" tabindex="-1" role="dialog" aria-labelledby="" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header" style="color: green;">
            <h5 class="modal-title" id=""><i class="fas fa-edit"></i> Edit Customer Info/Account</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" style="color: green !important;">&times;</span>
            </button>
        </div>
        <form role="form" method="POST">
        
            <div class="modal-body">

                <input class="form-control" type="" name="customer_id" id="customer_id">

                <div class="form-group">
                    <label>Firstname</label>
                    <input name="firstname" id="firstname" value="" class="form-control">
                </div>
                <div class="form-group has-success">
                    <label>Lastname</label>
                    <input name="lastname" id="lastname" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Address</label>
                    <input name="address" id="address" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Phone Number</label>
                    <input name="phone_number" id="phone_number" type="number" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Type</label>
                    <select class="form-control" name="type" id="type">
                        <option value="HO">Home Owner</option>
                        <option value="BO">Business Owner</option>
                        <option value="MRF">Material Recovery Facilitaty</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input name="email" id="email" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input name="password" id="password" type="text" class="form-control"  placeholder="">
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-sm btn-success">Add Customer</button>
            </div>

            </div>
        </form>

        </div>
    </div>
</div>

############# THE SCRIPT for AJAX

$('.editbtn').click(function(){
        var customer_id = $(this).attr("id");
        console.log(customer_id);

    $.ajax({
        url:"",
        method:"get",
        data:{customer_id:customer_id},
        dataType:"json",
        success:function(data){
                $('#customerEditModal').find('#customer_id').val(customer_id);
                // $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#lastname').val(data.lastname);
                $('#address').val(data.address);
                $('#phone_number').val(data.phone_number);
                $('#email').val(data.email);
                $('#password').val(data.password);
                $('#customerEditModal').appendTo('body').modal('show');
                console.log(data);
                console.log(data.firstname);

        },error:function(xhr,status,error){
            var err = eval('('+xhr.responseText+')');
            alert(err.message);
        }
    });
});

############## THE CONTROLLER (just the function)

public function customerShowByIdToEdit(Request $request){
        $id = $request->input('customer_id');
        $customer = DB::table('customer')
        ->join('users', 'users.id', 'customer.users_id')
        ->select('customer.id',
                 'customer.firstname as firstname',
                 'customer.lastname as lastname',
                 'customer.address',
                 'customer.phone_number',
                 'customer.type',
                 'users.email',
                 'users.password')
        ->where('customer.id','=', $id)
        ->get();

        return json_encode($customer);
    }

######### THE ROUTE (..on web.php)

Route::get('/dashboard/customerEdit', 'CustomerController@customerShowByIdToEdit')->name('customerEdit');

from Newest questions tagged laravel-5 - Stack Overflow http://bit.ly/2N1CKn4
via IFTTT