Ajax Success array to select dropdowns

I'm running an ajax query when a dropdown is selected. This portion works fine and successfully gives me the data i am looking for. The issue is I want to put that data into three different dropdown boxes, each with their own ID.

Main Select Dropdown

<select name="item_category" id="item_category" class="form-control">
  <option value="NA">-----</option>
  <option value="Blade">Blade</option>
  <option value="Component">Component</option>
  <option value="Handle">Handle</option>
  <option value="Misc">Clip</option>
</select>

AJAX Below

$("#item_category").change(function() {
    var option = $(this).val();

    //make the ajax call
    $.ajax({
        url: "{{ route('item.select') }}",
        type: 'GET',
        dataType: 'json',
        data: {type:option},
        success: function(data)
        {
            $.each(data, function(key, value) {
                if(key = 'models')
                //console.log(value);
                {
                    for (var i = 0; i < data.length; i++) {
                        console.log(value[0][i]);
                        $('#item_model').html('<option value="' +
                          data[0][i] +'">'+ data[0][i] +'</option>');
                    }
                }

            });
        }
    });
});

Dropdowns

<select name="item_model" class="form-control" id="item_model">
   <option value="NA">NA</option>
</select>
<select name="item_type" class="form-control" id="item_type">
   <option value="NA">NA</option>
</select>
<select name="item_color" class="form-control" id="item_color">
   <option value="NA">NA</option>
</select>

Response Data

{
"models": [
    { "model": "Mini"},
    { "model": "Raven/Spartan"},
    { "model": "Titan" }
],
"types": [
    { "type": ""},
    { "type": "Drop Point NS"},
    { "type": "Drop Point S"},
    { "type": "Spear Point DS"},
    { "type": "Spear Point Full H S"
],
"colors": [
    { "color": ""},
    { "color": "Black"},
    { "color": "Black oxide"},
    { "color": "Matte TIN" }
    ]
}

I just dont know Java/ajax enough to know exactly where my problem is.. which is also causing me a headache in googling it.

I feel im fairly close... just not there yet.

Thanks for helping!

PS. I know there is only one $.each. I also dont know how to incorporate a loop to go thru all the Models/Types/Colors.

Solution

I have created a snippet, which will come in inside part of ajax call but i commented that.

"types": [
     { "type": ""},
     { "type": "Drop Point NS"},
     { "type": "Drop Point S"},
     { "type": "Spear Point DS"},
     { "type": "Spear Point Full H S"
 ],

} is missing

  "types": [
     { "type": ""},
     { "type": "Drop Point NS"},
     { "type": "Drop Point S"},
     { "type": "Spear Point DS"},
     { "type": "Spear Point Full H S"}
  ],

$("document").ready(function(){
  $("#item_category").change(function() {
    var option = $(this).val();
        var data={
    "models": [
        { "model": "Mini"},
        { "model": "Raven/Spartan"},
        { "model": "Titan" }
    ],
    "types": [
        { "type": ""},
        { "type": "Drop Point NS"},
        { "type": "Drop Point S"},
        { "type": "Spear Point DS"},
        { "type": "Spear Point Full H S"}
    ],
    "colors": [
        { "color": ""},
        { "color": "Black"},
        { "color": "Black oxide"},
        { "color": "Matte TIN" }
        ]
    };

      //inside ajax success call 
    if(data.models && data.types && data.colors){    
         var html="";
         for (var i = 0; i < data.models.length; i++) {
         html=html+'<option value="' +
                          data.models[i].model +'">'+ data.models[i].model +'</option>';
            
         }
         $('#item_model').html(html);
      }
  });
})



  




    //make the ajax call
   /* $.ajax({
        url: "{{ route('item.select') }}",
        type: 'GET',
        dataType: 'json',
        data: {type:option},
        success: function(data)
        {
            $.each(data, function(key, value) {
                if(key = 'models')
                //console.log(value);
                {
                    for (var i = 0; i < data.length; i++) {
                        console.log(value[0][i]);
                        $('#item_model').html('<option value="' +
                          data[0][i] +'">'+ data[0][i] +'</option>');
                    }
                }

            });
        }
    });*/
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="item_model" class="form-control" id="item_category">
   <option value="NA">NA</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>
<select name="item_model" class="form-control" id="item_model">
   <option value="NA">NA</option>
</select>
<select name="item_type" class="form-control" id="item_type">
   <option value="NA">NA</option>
</select>
<select name="item_color" class="form-control" id="item_color">
   <option value="NA">NA</option>
</select>

In an another way

  Object.keys(data,function(obj){
     // here you ill get your keys like Models, types, colors 
     // make for loop based on your key like above 
  })