在 HTML 下拉框中填充 JSON 文件中存储的国家地区数据列表. PHPJavascriptAJAX 获取双值且未排序

我是新来的，所以如果我听起来很卑鄙，请原谅.

我正在try 用HTML语言创建下拉框来填充存储在JSON文件中的国家/地区列表.国家/地区的名称在对象中的另一个对象的数组中的对象中找到.

我已经设法填充了下拉框中的国家/地区，但它们似乎是重复的，并且没有按字母顺序排列.

我try 使用.sort()，但不确定如何在不 destruct 代码的情况下使用.

Index.html

<span id="selectContainer">
<select name="country" id="country" class="form-select">
<!-- populate from PHP call that returns only the codes and names from the countryborder GeoJSON file -->
<option value="">Select a country</option>
</select>
</span>

脚本.js脚本.js

$.getJSON("./countryBorders.geo.json", function(data) {

        const result = data['features'];
        
        for (let i=0; i < result.length; i++){
            let name = result[i]['properties']['name'];
            
        $.each(data, function (key, item) {
          
            $('#country').append(
                 $('<option></option>')
                 .val(item)
                 .html(name)
             );
             
            })
        }
    });

一个JSON文件的样例，名为Country Borders.Geo.json

{"type": "featureCollection", "features": 
[{"type": "Feature", "properties": {"name": Bahamas", "iso_a2":"BS", "iso_a3": "044"}, "geometry": {"type": "Multipolygon", "coordinates": [[ etc ]]}, 
{"type": "Feature", "properties": {"name": Mexico", "iso_a2":"MX", "iso_a3": "484"}, "geometry": {"type": "Multipolygon", "coordinates": [[ etc ]]},
{"type": "Feature", "properties": {"name": Trinidad and Tobago", "iso_a2":"TT", "iso_a3": "780"}, "geometry": {"type": "Multipolygon", "coordinates": [[ etc ]]}, 
...

以此类推

pic of what my dropdown box looks like个

如有建议，我们将不胜感激！期待中的感谢！