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

Question

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+

Devsi Odedra · Accepted Answer · 2021-11-25 12:18:36Z

1

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>

answered Nov 25, 2021 at 12:18

Devsi Odedra

5,3421 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blu3 Over a year ago

That was exactly it bro, thank you very much, as an expert how would you rate the js code I have in place?

Devsi Odedra Over a year ago

@Blu3 looks fine.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related