populate a SELECT Dropdown List with JSON Data using JavaScript

Question

I want to populate a SELECT Dropdown List with JSON Data using JavaScript

success: function(data) {
    var distList = data.d;
    console.log(distList);
    //consoleoutput =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]
    var s = '<option value="-1">Please Select a Distic</option>';
    for (var i = 0; i < distList.length; i++) {
        s += '<option value="' + distList[i].ID + '">' + distList[i].Districtname + '</option>';
    }
    $("#dist").html(s);

}

i tried another approach

  $.each(distList, function (key, value) {
  $('#dist').append('<option value="' + key + '">' + value + '</option>');
});

but

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Districtname":"CENTRAL.................... ,{"Districtname":"WEST DELHI","ID":8}]

plz help

Muzaffar Ur Rahman · Answer

Hi Could you please have look on this articel. https://checkedexception.com/blog/populate-a-select-dropdown-list-with-json

Amit Mohanty · Answer

You can also try this to set value as well as text. success: function(data) { var distList = data.d; var option = ' Please Select a District '; $.each(distList function (index district) { option += ' ' + district.Districtname + ' '; }); $(#dist).html(option); }

Khushi Soni Rajpoot · Answer

i solve this let distList = JSON.parse(data.d); //method 1 //var s = ' Please Select a District '; //for (var i = 0; i ' + distList[i].Districtname + ' '; //} //$(#dist).html(s); //method 2 $(#dist).html(); $.each(distList function (key value) { $('#dist').append(' ' + distList[key].Districtname + ' '); });