Retrieve data from JSON file using PHP routine and feed it to html select tag

Question

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.

Answer 1

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);
            }
        }); 
    
    });