从外部文件收集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>

这似乎不起作用，所有文件都在同一台服务器上。

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