Dependent dropdown is returning [object object] using ajax in Laravel?

I have two dropdown City and City Area. I want to fill City area drop-down based on the selected value of City.

Route:

  Route::get('create-profile', 'ProfileController@index');
  Route::get('create-profile/city_area/{id}', 'ProfileController@city_area');

Primary Dropdown is : City

<div class="col-xs-7 col-md-push-1">
<select name="city" id="city">
<option value="">--- Select City ---</option>
 @foreach($city as $city)
  <option value="{{$city->id}}">{{$city->city_name}}</option>
 @endforeach
 </select></div>

Dependent Dropdown is

     <div class="inp_sec">
      <div class="col-xs-4">
      <label for="r3">City Area</label>
      </div><div class="col-xs-7 col-md-push-1">
      <select name="city_area" id="city_area"></select></div></div>

Ajax for dependend dropdown is

<script type="text/javascript">
$(document).ready(function() {
    $('select[name="city"]').on('change', function() {
        var cityID = $(this).val();
        if(cityID) {
            $.ajax({
                url: 'create-profile/city_area/'+cityID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="city_area"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="city_area"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
        }else{
            $('select[name="city_area"]').empty();
        }
    });
});

Php Code to fetch data of dependent dropdown is

public function city_area($id)
{
$city_area= DB::table('czech_area')->where('citi_id',$id)- 
>select('id','area_name')->get();
    return json_encode($city_area);
}