Ajax returns 'undefined' value

Question

I have a select box that populates from the database dynamically. The second field populates depending on what the user has selected in the first box. I have achieved this using ajax.

When I select the first option the second option displays 'undefined' items instead of the actual data from the database.

This is my form :

  <form class="form-inline" id="search-bar">

        <select class="form-control productcategory" id="product_cat_id">

           <option value="0" disabled="true" selected="true">Town</option>
           @foreach($estates as $estate)
             <option value="{{$estate->id}}">{{$estate->product_cat_name}
             </option>

           @endforeach
        </select>

        <select class="form-control productname">

           <option value="0" disabled="true" selected="true">Product Name</option>
        </select>

        <select class="form-control">
            <option value="0" disabled="true" selected="true">Size</option>
            <option value="Bedsitter">Bedsitter</option>
            <option value="One Bedroom">One Bedroom</option>
            <option value="Two Bedroom">Two Bedroom</option>
            <option value="Three Bedroom">Three Bedroom</option>
         </select>

        <button type="submit" class="btn btn-default">Search</button>
</form>

This is my controller :

   public function getIndex(){
          $houses = House::orderBy('id', 'desc')->limit(9)->get();
          //$towns = DB::table('houses')->pluck('Location', 'Location');
          //$estates = DB::table('houses')->pluck('Estate', 'Estate');
          $estates=ProductCat::all();

          $data = [
            'house' => $houses,
            //'towns' => $towns,
            'estates' => $estates
          ];
          return View('pages.home', $data);
      }

      public function findEstateName(Request $request){
          $data=House::select('Estate','id')->where('prod_cat_id',$request->id)->take(100)->get();
          return response()->json($data);//then send this data to ajax success
      }

This is my ajax code:

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '.productcategory', function(){
           //console.log("Shit is working");

           var new_id=$(this).val();
           //console.log(cat_id);
           var div=$(this).parent();

           var op=" ";

            $.ajax({
               type:'get',
               url:'{!!URL::to('findEstateName')!!}',
               data:{'id':new_id},
               success:function(data){
                    //console.log('success');
                    //console.log(data);
                    //console.log(data.length);
                     op+='<option value="0" selected disabled>chose product</option>';
                     for(var i=0;i<data.length;i++){
                     op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';
                     }
                    div.find('.productname').html(" ");
                    div.find('.productname').append(op);

                },
               error:function(){

               }
            });
        });
        $(document).on('change','.productname',function (){
          var prod_id=$(this).val();

          var a=$(this).parent();
          console.log(prod_id);
          var op="";
        });
    });
</script>

I cant figure out why items will not populate on my second box but only return 'undefined'. What could I be missing?

Answer 1

It seems the attribute name is Estate not productname as you are using in your code. Try changing data[i].productname to data[i].Estate.

So this line :

op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';

should be:

op+='<option value="'+data[i].id+'">'+data[i].Estate+'</option>';