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]]]]}},
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.
Use
value: result.data[i].iso_a2,
text: result.data[i].name