Laravel ajax returns undefined value

Question

I have an dropdown that I want it to make dynamic. In my example, a service has many categories and a categories belongs to a specific service. When a dropdown service is selected. It will display only all the categories that belongs to that service in the second dropdown.

So here's what I have done so far.

In my fields.blade.php

    <!-- Service Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('service_id', 'Service:') !!}
     {!! Form::select('service_id', $services, null, ['class' => 'form-control','required', 'id' => 'service_id'])!!}
</div>

<!-- Categories Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('category_id', 'Category:') !!}
     {!! Form::select('category_id', $categories, null, ['class' => 'form-control','required', 'id' => 'category_id'])!!}
</div>

In my JS script

$(function() {
            $('#service_id').change(function() {

                var url = '{{ url('encoder') }}' + '/service/' + $(this).val() + '/categories/';

                $.get(url, function(data) {
                    var select = $('form select[name= category_id]');

                    select.empty();

                    $.each(data,function(key, value) {
                        select.append('<option value=' + value.id + '>' + value.name + '</option>');
                    });
                });
            });
        });

In my routes web.php

Route::group(['prefix' => 'encoder','namespace' => 'Encoder'], function () {
Route::get('service/{service}/categories', 'ServiceController@getCategories');
});

In my ServieController.php

public function getCategories($idService)
    {
        if(!is_numeric($idService)) abort(404);

        $service = Service::findOrFail($idService);
        return $service->categories->pluck('name', 'id');
    }

I think I am already fetching the right data because when a specific service has 2 categories. It returns me also 2, but the value is undefined in the dropdown.

So I think the problem only here is that the script returns me un undefined value.

Appreciate if someone could help. Thanks in advance.

Answer 1

Change

$.each(data,function(key, value) {
   select.append('<option value=' + value.id + '>' + value.name + '</option>');
});

To

$.each(data,function(key, value) {
   select.append('<option value=' + key + '>' + value + '</option>');
});

Answer 2

I doubt your js onchange event is working or not because,

You add ajax call on "onChange" event of dropdown using id attibute of dropdown

$('#service_id').change(function() {

And your view file has dropdown using below code

{!! Form::select('service_id', $services, null, ['class' => 'form-control','required'])!!}

So, in this declaration there is no "id" attribute specified.

You should use

{!! Form::select('service_id', $services, null, ['class' => 'form-control','required', 'id' => 'service_id'])!!}