Javascript for each loop only passing 1 value from JSON and not both-CodePudding

I am creating a Ajax dependent dropdown and I am able to get everything working except passing in the correct ID's of each select option, here is my HTML:

<p>
                <select name="country" id="country">
                    <option value="">Select Country</option>
                    <?php foreach($countries as $country) { ?>
                    <option value="<?php echo $country[$columnName['COLUMN_NAME']]; ?>"><?php echo $country['name']; ?></option>
                    <?php } ?>
                </select>
            </p>
            <p>
                <select name="state">
                    <option value="">Select State</option>
                </select>
            </p>

The PHP code is working fine and is fetching all the countries and their ids correctly. But when I use Ajax to populate the state select dropdown I do not get the id of each state, here is my js:

$(document).ready(function() {

$('select[name="country"]').on('change',function(){
    var country_id= $(this).val();
    if (country_id) {
    $.ajax({
        url: "/world/getStates.php",
        type: "GET",
        data: {'country_id':country_id},
        dataType: "json",
        success: function(data){
        console.log(data);
        $('select[name="state"]').empty();
        $.each(JSON.parse(data), function(key,value){
             $('select[name="state"]').append('<option value="' key '">' value.name '</option>');
                    });
                  }
                 });
                }else {
                     $('select[name="state"]').empty();
               }
           });

});

and this is the console.log (I chose the first option country Afganistan and below you can see the states belonging to it):

[{"id":"3870","name":"Ghazni"},{"id":"3871","name":"Badghis"},{"id":"3872","name":"Bamyan"},{"id":"3873","name":"Helmand"},{"id":"3874","name":"Zabul"},{"id":"3875","name":"Baghlan"},{"id":"3876","name":"Kunar"},{"id":"3877","name":"Paktika"},{"id":"3878","name":"Khost"},{"id":"3879","name":"Kapisa"},{"id":"3880","name":"Nuristan"},{"id":"3881","name":"Panjshir"},{"id":"3882","name":"Nangarhar"},{"id":"3883","name":"Samangan"},{"id":"3884","name":"Balkh"},{"id":"3885","name":"Sar-e Pol"},{"id":"3886","name":"Jowzjan"},{"id":"3887","name":"Herat"},{"id":"3888","name":"Gh\u014dr"},{"id":"3889","name":"Faryab"},{"id":"3890","name":"Kandahar"},{"id":"3891","name":"Laghman"},{"id":"3892","name":"Daykundi"},{"id":"3893","name":"Takhar"},{"id":"3894","name":"Paktia"},{"id":"3895","name":"Parwan"},{"id":"3896","name":"Nimruz"},{"id":"3897","name":"Logar"},{"id":"3898","name":"Urozgan"},{"id":"3899","name":"Farah"},{"id":"3900","name":"Kunduz Province"},{"id":"3901","name":"Badakhshan"},{"id":"3902","name":"Kabul"}]

And my second dropdown select is loaded with the states however the option values simply start from 0 and increment by 1 based on how many records there are, but I need to show the exact id of each state and not just an incremented number, so this is what my select options looks like after the ajax loads it (I have copied only the first 4 and not the whole option list):

<select name="state">
<option value="0">Ghazni</option>
<option value="1">Badghis</option>
<option value="2">Bamyan</option>
<option value="3">Helmand</option>
</select>

but what it should be showing is this (real ids belonging to each state):

<select name="state">
<option value="3870">Ghazni</option>
<option value="3871">Badghis</option>
<option value="3872">Bamyan</option>
<option value="3873">Helmand</option>
</select>

Any one have any idea what I am missing in my for each loop?

Note: I have also tried changing key to key.id

CodePudding user response：

use value.id instead ' key ' as

var arr = [{"id":"3870","name":"Ghazni"},{"id":"3871","name":"Badghis"},{"id":"3872","name":"Bamyan"},{"id":"3873","name":"Helmand"},{"id":"3874","name":"Zabul"},{"id":"3875","name":"Baghlan"},{"id":"3876","name":"Kunar"},{"id":"3877","name":"Paktika"},{"id":"3878","name":"Khost"},{"id":"3879","name":"Kapisa"},{"id":"3880","name":"Nuristan"},{"id":"3881","name":"Panjshir"},{"id":"3882","name":"Nangarhar"},{"id":"3883","name":"Samangan"},{"id":"3884","name":"Balkh"},{"id":"3885","name":"Sar-e Pol"},{"id":"3886","name":"Jowzjan"},{"id":"3887","name":"Herat"},{"id":"3888","name":"Gh\u014dr"},{"id":"3889","name":"Faryab"},{"id":"3890","name":"Kandahar"},{"id":"3891","name":"Laghman"},{"id":"3892","name":"Daykundi"},{"id":"3893","name":"Takhar"},{"id":"3894","name":"Paktia"},{"id":"3895","name":"Parwan"},{"id":"3896","name":"Nimruz"},{"id":"3897","name":"Logar"},{"id":"3898","name":"Urozgan"},{"id":"3899","name":"Farah"},{"id":"3900","name":"Kunduz Province"},{"id":"3901","name":"Badakhshan"},{"id":"3902","name":"Kabul"}];

$.each(arr, function(key,value){
   
       var html = '<option value="' value.id '">' value.name '</option>';
       console.log('value',html);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>