CODEWITHSUNDEEP
phpjsonajaxlaravellaravel-4
BourneShady
BourneShady

Reputation: 935

laravel 4.2 get data from Object in json response to populate dropdown

hello so i have two dropdown list the first one contains my main categories and the second one is containing the sub categories based from the chosen main category to do this i tried using ajax and json. in my view here is the code for the dropdown list

<div class="input-field col s10 offset-s1" style="margin-top:40px;">
    <h6>Main Categories</h6>
    <select name="category" id="category">
        @foreach($mCategories as $list)
            <option value="{{$list->maincategoryid}}">{{$list->maincategoryname}}</option>
        @endforeach
    </select>
</div>
<div class="input-field col s10 offset-s1" style="margin-top:40px;">
    <h6>Sub Categories</h6>
    <select name="subcategory" id="subcategory">
        <option value=""></option>
    </select>
</div>

<script>

    $('#category').on('change' , function(e){
        console.log(e);

        var cat_id = e.target.value;

        //ajax
        $.get('ajax-subcat?cat_id=' + cat_id , function(data){
            console.log(data);

            $('#subcategory').empty();

            $.each(data, function(index, subcatObj)
            {
              $('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
            });

        });
    });

</script>

i have also included the script that would call an ajax whenever the 'Main category' dropdown is changed. the code for that ajax is in my route and looks like this

Route::get('ajax-subcat' ,function()
{
$cat_id = Input::get('cat_id');
$subcategories = DB::table('nsa_subcategory')
                ->where('maincategoryid' , '=' , $cat_id)
                ->get();
return Response::json($subcategories);

});

basically, it just returns the subcategory based from the main category chosen by the user. Coming back to my view, when the user changed the value of the main category, the json response im having in my console is this, enter image description here

these data are actually correct. What i am trying to do is to access the object to get the subcategoryid and subcategoryname then display it inside a dropdown list. but so far, with my codes in my view, i cannot populate the subcategory dropdown. any ideas what im doing wrong with my codes? thanks for any help

Upvotes: 0

Views: 842

Answers (2)

Hamza Dairywala
Hamza Dairywala

Reputation: 482

Change the conrtoller JSON Response like this.

 Route::get('ajax-subcat' ,function()
  {
    $cat_id = Input::get('cat_id');
    $subcategories = DB::table('nsa_subcategory')
            ->where('maincategoryid' , '=' , $cat_id)
            ->get();

    return Response::json(array('result' => true,'data' => $subcategories),200)->setCallback(Input::get('callback'));
  });

Change Your JS in following way 

 <script>

$('#category').on('change' , function(e){
    console.log(e);

    var cat_id = e.target.value;

    //ajax
    $.get('ajax-subcat?cat_id=' + cat_id , function(data){
        console.log(data);

        $('#subcategory').empty();

        $.each(data.data.subcategories, function(index, subcatObj)
        {
          $('#subcategory').append('<option value="' + subcatObj.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
        });

    });
});

Upvotes: 1

Taha Paksu
Taha Paksu

Reputation: 15616

Try changing 

 $.each(data, function(index, subcatObj) {
     $('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
 });

to

for(var i = 0; i < data.length; i++) {
    $('<option value="' + data[i].subcategoryid + '">' + data[i].subcategoryname + '</option>').appendTo("#subcategory");
}

and 

$.get();

to 

$.getJSON();

Upvotes: 1

Related Questions