I'm trying to retrieve data from json file using php and I want this data populated to a html select tag on the front end.
Here is my php file :
<?php
ini_set('display-errors', 'on');
error_reporting(E_ALL);
$executionStartTime = microtime(true);
$result = file_get_contents('countryBorders.geo.json');
$decode = json_decode($result,true);
$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "success";
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
$output['data'] = $decode;
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
my main js file :
$.ajax({
url: "./php/getBorders.php",
type: 'POST',
dataType: "json",
success: function(result) {
console.log(result);
for (let i=0; i< result.data.border.features.length; i++) {
$('#selCountry').append($('<option>', {
value: result.data.border.features[i].properties.iso_a3,
text: result.data.border.features[i].properties.name,
}));
}
}
});
Currently I'm receiving error that method is not allowed. I'm not sure where I'm making mistake here... If anyone can give me advice I would greatly appreciate it.
After checking your answers and digging in little more around my code I found that code below done the job feeding json file data to the html select tag My code snipped below:
$('#selCountry').click(function() {
let border;
let name;
$.ajax({
url: "./php/getBorders.php",
type: 'POST',
dataType: 'json',
success: function(result) {
console.log(JSON.stringify(result))
for (let i=0; i< result.data.border.features.length; i++) {
$option = $('<option>')
.val(result.data.border.features[i].properties.iso_a3)
.text(result.data.border.features[i].properties.name);
$('#selCountry').append($option);
}
const filterData = result.data.border.features.filter((a) => (a.properties.iso_a3 === name));
border = L.geoJSON(filterData[0]);
myMap.fitBounds(border.getBounds());
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
console.log(jqXHR);
}
});
});