Сбор данных JSON из внешнего файла

Question

У меня есть файл JSON с именем destination.json, и я хотел бы получить данные из этого файла для отображения в раскрывающемся списке на HTML. Файл в формате JSON является, как показано ниже

{ 
    "Destinations": [ 
    { 
     "destinationName": "London", 
     "destinationID": "lon" 
    }, 
    { 
     "destinationName": "New York", 
     "destinationID": "nyc" 
    }, 
    { 
     "destinationName": "Paris", 
     "destinationID": "par" 
    }, 
    { 
     "destinationName": "Rome", 
     "destinationID": "rom" 
    } 
    ] 
} 

До сих пор, я убедился, что библиотека JQuery доступна, а затем создал функцию, которая будет извлекать данные из файла JSON при нажатии, как показано ниже.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function() { 

    $('#fetch').click(function() { 
    $.post('http://jonathangatenby.co.uk/Candidate/json/destinations.json', {}, function(data) { 
     $.each(data.Destinations, function(i, v) { 
      $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); 
     }); 
    }); 
}); 
</script> 

отсюда, у меня есть простой HTML, который даст мне раскрывающийся список.

<select id="destinations"> 
    <option value="">Select</option> 
</select> 
<a href="#" id="fetch">Fetch JSON</a> 

Это не работает, и все файлы находятся на одном сервере.

Answer 1

Попробуйте Jquery код:

$(function() { 
    $('#fetch').click(function(){ 
     $.getJSON('yourjsonfile.json', function(data) { 
      destinations = data['Destinations'] 

      $.each(destinations, function(id, destination) { 
       $('select').append('<option value="">'+destination["destinationName"]+'</option>') 
      }) 
     }); 
    }) 
})