how to pupulate dropdown list with items from array?

Question

I want to populate dropdownl list with array valuse. using jquery

My Tables:

----   -----------------  ----
Place   place_category    category
id         place_id         id
name       category_name    name

<div class="form-group" >
<label class="text-primary" dir="rtl" for="exampleFormControlSelect1">{{trans('admin.itemCats')}}</label>
<select class="form-control" name="itemcat" data-style="btn btn-link" id="itemcat">
<option value=""></option>
</select>
</div>

This is my code:

    public function getCat(Request $request)
    {

        $categories = Category_place::where('place_id',$request->place)->select('category_id')->get()->toArray();
        $selected_categoryPlaceArray = [];

        foreach($categories as $category)
        {
            $selected_categoryPlaceArray[] = $category['category_id'];
        }

        $parentCategories = Category::whereIn('id',$selected_categoryPlaceArray)->get()->pluck('name','id')->toArray();

        $parentArray =[];
        foreach ($parentCategories as $key=>$value )
      {
          $parentArray[$key] =$value;
      }


        return ['parentArray'=>$parentArray];
    }

Which gives me the output :

1: "food"
2: "drinks"
4: "meals"

route:

Route::get('/getcat', "Admin\ItemController@getCat") ;

I want to use it in the jquery so when I choose place i pupulates those values of item cats. but now it doesn't populate anything.

$("#place").on('change', function () {
                     var categories_array = $parentArray;

                $.each(categories_array, function(val, text) {
                    $('#itemcat').append( $('<option></option>').val(val).html(text) )
                });

            var form = $("#myform");
                $.ajax({
                    url: '/getcat',
                    type: "GET",
                    data: form.serialize(),
                    dataType: "json"
                }).done(function (response) {
                    console.log(response);
                     })
                    .fail(function (response) {
                        var errors = response.responseJSON;
                        $.each(errors, function (index, value) {
                            console.log('error2');
                     });
                });
            });

Answer 1

This is How I solved my problem

controller

 public function getCat(Request $request)
    {

        $categories = Category_place::where('place_id',$request->place)->select('category_id')->get()->toArray();
        $selected_categoryPlaceArray = [];

        foreach($categories as $category)
        {
            $selected_categoryPlaceArray[] = $category['category_id'];
        }

        $result = Category::whereIn('id',$selected_categoryPlaceArray)->select('name','id')->get();




        return response()->json(['result'=>$result]);
}

JQuery Code

 <script>
        $("#itemcat").prop("disabled",true);
        $("#place").on('change', function () {
            // alert(2);
            $("#itemcat").prop("disabled",false);
            $("#itemcat").empty();
            var form = $("#myform");
            $.ajax({
                url: '/getcat',
                type: "GET",
                data: form.serialize(),
                dataType: "json"
            }).done(function (response) {
                console.log(response.result);

                var dropdown = $("#itemcat");

                $.each(response.result, function() {

                    dropdown.append($("<option />").val(this.id).text(this.name));

                });

            })
                .fail(function (response) {
                    var errors = response.responseJSON;
                    $.each(errors, function (index, value) {
                        console.log('error2');
                    });
                });
        });
    </script>

Answer 2

Give this a shot.

@foreach ($parentArray as $key => $parent)
    <option value="{{ $key }}">{{ $parent }}</option>
@endforeach

Hope this helps. Cheers!