Populate Dropdown from PHP-CodePudding

How would I complete the ajax call below from the data received in the php?

The for loop etc. I believe I am asking for the wrong stuff. I am working with leaflet js, to get to populate a drop down list with country names.

Thank you, I am very new and confused!

The current js/ajax code::

$.ajax({
        url:"js/geoJson.php",
        type: 'POST',
        dataType: "json",
        
        success: function(result) {
            console.log(result);
            
            for (var i=0; i<result.data.country.length; i  ) {
                $('#select-country').append($('<option>', {
                    value: result.data.country[i].properties.iso_a2,
                    text: result.data.country[i].properties.name,
                }));
               }
            }
        });

The PHP which is working correctly:

$executionStartTime = microtime(true);

$result = file_get_contents("countryBorders.geo.json");

$decode = json_decode($result,true);    

$countries = [];



 for($i=0;$i<count($decode['features']);$i  ) {

     array_push($countries,$decode['features'][$i]['properties']);

 };

 $output['status']['code'] = "200";

 $output['status']['name'] = "ok";

 $output['status']['description'] = "success";

 $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";

 $output['data'] = $countries;

 header('Content-Type: application/json; charset=UTF-8');

 echo json_encode($output);

Data Sample:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":

{"name":"Bahamas","iso_a2":"BS","iso_a3":"BHS","iso_n3":"044"},"geometry":

{"type":"MultiPolygon","coordinates":[[[[-77.53466,23.75975],
[-77.78,23.71],[-78.03405,24.28615],[-78.40848,24.57564],
[-78.19087,25.2103],[-77.89,25.17],[-77.54,24.34],
[-77.53466,23.75975]]],[[[-77.82,26.58],[-78.91,26.42],
[-78.98,26.79],[-78.51,26.87],[-77.85,26.84],[-77.82,26.58]]],
[[[-77,26.59],[-77.17255,25.87918],[-77.35641,26.00735],
[-77.34,26.53],[-77.78802,26.92516],[-77.79,27.04],[-77,26.59]]]]}},

CodePudding user response：

Use

value: result.data[i].iso_a2,
text: result.data[i].name

CodePudding user response：

This should do the trick. Just replace the JS code above with this.

 $.ajax({
    url: "js/geoJson.php",
    type: 'POST',
    dataType: "json",

    success: function(result) {
        const
            sel_country = document.querySelector('#select-country')

        let str = ''
        for (let i = 0; i < result.features.length; i  ) {
            const
                data = result.features[i]
            str  = `<option value="${data.properties.iso_a2}">${data.properties.name}</option>`
        }

        sel_country.innerHTML = str
    }
});

I have edited my initial code.