title: How to fix my problem, the data that I get from database using ajax would not appear on bootstrap modal
body: <p>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!</p>
  
  <p><strong>THE BLADE FILE/HTML</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="customerEditModal" tabindex="-1" role="dialog" aria-labelledby="" &gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
          &lt;div class="modal-header" style="color: green;"&gt;
              &lt;h5 class="modal-title" id=""&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt; Edit Customer Info/Account&lt;/h5&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
              &lt;span aria-hidden="true" style="color: green !important;"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;form role="form" method="POST"&gt;
          {{ csrf_field() }}
              &lt;div class="modal-body"&gt;
  
                  &lt;input class="form-control" type="" name="customer_id" id="customer_id"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Firstname&lt;/label&gt;
                      &lt;input name="firstname" id="firstname" value="" class="form-control"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group has-success"&gt;
                      &lt;label&gt;Lastname&lt;/label&gt;
                      &lt;input name="lastname" id="lastname" type="text" class="form-control" placeholder=""&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group has-success"&gt;
                      &lt;label&gt;Address&lt;/label&gt;
                      &lt;input name="address" id="address" type="text" class="form-control" placeholder=""&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group has-success"&gt;
                      &lt;label&gt;Phone Number&lt;/label&gt;
                      &lt;input name="phone_number" id="phone_number" type="number" class="form-control" placeholder=""&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group has-success"&gt;
                      &lt;label&gt;Type&lt;/label&gt;
                      &lt;select class="form-control" name="type" id="type"&gt;
                          &lt;option value="HO"&gt;Home Owner&lt;/option&gt;
                          &lt;option value="BO"&gt;Business Owner&lt;/option&gt;
                          &lt;option value="MRF"&gt;Material Recovery Facilitaty&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;Email&lt;/label&gt;
                      &lt;input name="email" id="email" type="text" class="form-control" placeholder=""&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Password&lt;/label&gt;
                      &lt;input name="password" id="password" type="text" class="form-control"  placeholder=""&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="submit" class="btn btn-sm btn-success"&gt;Add Customer&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/form&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>THE SCRIPT for AJAX</strong></p>
  
  <pre><code>$('.editbtn').click(function(){
          var customer_id = $(this).attr("id");
          console.log(customer_id);
  
      $.ajax({
          url:"{{ route('customerEdit') }}",
          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);
          }
      });
  });
  </code></pre>
  
  <p><strong>THE CONTROLLER (just the function)</strong></p>
  
  <pre><code>public function customerShowByIdToEdit(Request $request){
          $id = $request-&gt;input('customer_id');
          $customer = DB::table('customer')
          -&gt;join('users', 'users.id', 'customer.users_id')
          -&gt;select('customer.id',
                   'customer.firstname as firstname',
                   'customer.lastname as lastname',
                   'customer.address',
                   'customer.phone_number',
                   'customer.type',
                   'users.email',
                   'users.password')
          -&gt;where('customer.id','=', $id)
          -&gt;get();
  
          return json_encode($customer);
      }
  </code></pre>
  
  <p><strong>THE ROUTE (..on web.php)</strong></p>
  
  <pre><code>Route::get('/dashboard/customerEdit', 'CustomerController@customerShowByIdToEdit')-&gt;name('customerEdit');
  </code></pre>
  
  <p>the result from console.log(data):
  <a href="https://i.stack.imgur.com/QxBtN.jpg" rel="nofollow noreferrer">enter image description here</a></p>