title: Laravel Ajax displaying Data using looping
body: <p>I want to display data when I click search button. </p>
  
  <p>search button form code so far :</p>
  
  <pre><code>&lt;div class="col-xs-4 col-sm-4 col-md-4"&gt;
   &lt;div class="form-group"&gt;
      &lt;label class="control-label"&gt;Driver Name:&lt;/label&gt;
      {!! Form::select('driver_id', $driver, null, array('class' =&gt; 'form-control')) !!}
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-4 col-sm-4 col-md-4"&gt;
   &lt;div class="form-group"&gt;
      &lt;label&gt;Fine Date:&lt;/label&gt;
      {!! Form::text('fine_date', null, array('id' =&gt; 'datetimepicker', 'class' =&gt; 'form-control')) !!}
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-4 col-sm-4 col-md-4"&gt;
   &lt;div class="form-group filter-btn"&gt;
      &lt;button class='btn btn-info' type='search'&gt;Search&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here's my controller so far :</p>
  
  <pre><code>public function getDriverByWorkingDate(Request $request) {
  return Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
                          -&gt;join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
                          -&gt;join('cars', 'fleets.car_id', '=', 'cars.id')
                          -&gt;select(
                              'fleets.start_time',
                              'fleets.end_time', 
                              'fleets.car_id', 
                              'cars.plate_no',
                              'attendances.working_date',
                              'attendances.driver_id'
                          )
                          -&gt;where('attendances.working_date', Carbon::parse($request-&gt;fine_date))
                          -&gt;where('attendances.driver_id', $request-&gt;driver_id)-&gt;get();
  }
  </code></pre>
  
  <p>and here's jquery so far :</p>
  
  <pre><code>$('button[type="search"]').click(function(e) {
      $.ajax({
          url: "{{ route('driver.name') }}",
          type: "POST",
          data: { 
              '_token' : '{{csrf_token() }}',
              'driver_id' : $('select[name="driver_id"]').val(),
              'fine_date' : $('input[name="fine_date"]').val(),
          },
          success: function(data) {
          },
          error: function(data) {
  
          } 
      });  
  });
  </code></pre>
  
  <p>Everything works fine and data is being returned.</p>
  
  <pre><code>#attributes: array:6 [
      "start_time" =&gt; "2016-11-16 08:00:00"
      "end_time" =&gt; "2016-11-16 18:00:00"
      "car_id" =&gt; 5
      "plate_no" =&gt; "DFE82846J"
      "working_date" =&gt; "2016-11-16"
      "driver_id" =&gt; 1
    ]
    #original: array:6 [
      "start_time" =&gt; "2016-11-16 08:00:00"
      "end_time" =&gt; "2016-11-16 18:00:00"
      "car_id" =&gt; 5
      "plate_no" =&gt; "DFE82846J"
      "working_date" =&gt; "2016-11-16"
      "driver_id" =&gt; 1
    ]
  </code></pre>
  
  <p>How do I display those data into HTML div ? 
  thanks,</p>