Заливка HTML выпадающий список с данными файла внешнего JSON

Question

Я пытаюсь заполнить выпадающее меню HTML с данными из внешнего JSON-файл, который содержит следующие

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

То, что я хотел бы это выпадающее меню отображать имя destinationName, например, Лондон, Нью-Йорк и т. д., но я смущен, как подойти к этому.

Любая помощь приветствуется.

Answer 1

Создайте тег <select> в своем html и заполните его <option>, используя атрибут value. Value будет вашим destinationID, но он покажет destinationName.

Example

<form action="demo_form.asp"> 
    <select name="cars"> 
     <option value="volvo">Volvo XC90</option> 
     <option value="saab">Saab 95</option> 
     <option value="mercedes">Mercedes SLK</option> 
     <option value="audi">Audi TT</option> 
    </select> 
    <input type="submit" value="Submit"> 
</form> 

Answer 2

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

$.getJSON('yourfile.json', function(data) { 
    destinations = data['Destinations'] 

    $.each(destinations, function(id, destination) { 
     destination = destination["destinationName"] 
     alert(destination) 
    }) 
}); 

Это позволяет получить значение назначения в целевой переменной, поскольку, после, может делать все со значениями этой переменной.

Answer 3

Рассмотрим вы получили ответ от сервера, как

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

Тогда ваш следующий шаг должен быть итерация этого JSON

$.each(data.Destinations, function(key, val) { 
    items.append('<option value="' + val.destinationID + '">' + val.destinationName + '</option>'); 
    }); 

вы можете увидеть демо здесь Fiddle Demo

Answer 4

Использование each и appendselect примерно:

$.each(data.Destinations, function(i, v) { 
    $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); 
}); 

jsFiddle

Обновленный Пример (test.html для http://jonathangatenby.co.uk/Candidate/json/destinations.json)

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
$(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-файл или файл, из которого вы делаете ajaxcall находятся на одном домене (jonathangatenby.co.uk)