jquery - 外部ファイルからの JSON データの収集

Question

destinations.json という名前の 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>

これは機能していないようで、すべてのファイルが同じサーバー上にあります。