(Feel free to use JQuery) 1) Create an object, with 5 properties: i. The key of
ID: 3574930 • Letter: #
Question
(Feel free to use JQuery)
1) Create an object, with 5 properties:
i. The key of these properties will be city names. 'vancouver', 'toronto', etc.
ii. The value of those keys will be another object. Thoes objects will have props for cityName and province.
2) Populate a dropdown input on the document, with the array above. The name of the item should be {cityName, province}. The value of the option should be the cityName.
3) When the dropdown input changes, fetch for data using AJAX. (Use the ajax.html example below)
4) Display weather data for the selected city, as well as the city name and province.
-------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
/**
* Do not worry about this weatherUrl for now. Basically, this is an API url provided
* by Yahoo. Making a request to this url will return weather forecast information
* for the city of Vancouver, BC. The format of the response is JSON, which is a popular
* format used when using AJAX.
*/
var weatherUrl = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22vancouver%2C bc%22)%20and%20u%20%3D%20"c"&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
/**
* Callback which will be called when the response from the request to Yahoo
* returns. The object 'data' is the response object provided by Yahoo.
*/
var callback = function(data) {
var days = data.query.results.channel.item.forecast;
for(var i = 0; i < days.length; i++) {
var day = days[i];
console.log(day);
$('body').append(
'<p>' + day.date + ' - ' + day.text + '</p>'
);
}
};
$.get(weatherUrl, callback);
</script>
</head>
<body>
</body>
</html>
Explanation / Answer
<script type="text/javascript">
$(function () {
// Populate City
$('#StateProvince-DropDownID').change(function () {
var selectedCountryID = $('#Country-DropdownID option:selected').val();
var selectedStateProvinceID = this.value;
$('#CityContainer').load(<a href="mailto:'@Url.Action<br/> ("CityView")?countryID='">'@Url.Action
("CityView")?countryID=' +
selectedCountryID +'&stateprovinceID=' +
selectedStateProvinceID);
});
});
</script>
public static List<Models.DataModel.CountryDataModel> Countries =
new List<Models.DataModel.CountryDataModel>()
{
new Models.DataModel.CountryDataModel
{ ID = 1, CountryName = "USA",
StateOrProvinceList =
new List<Models.DataModel.StateProvinceDataModel>()
{
new Models.DataModel.StateProvinceDataModel
{
ID = 1, StateOrProvinceName = "Michigan",
CityList = new List<Models.DataModel.CityDataModel>()
{
new Models.DataModel.CityDataModel {ID = 1,
CityName = "Detroit"},
new Models.DataModel.CityDataModel {ID = 2,
CityName = "Saginaw"},
new Models.DataModel.CityDataModel {ID = 3,
CityName = "Troy"}
}
},
new Models.DataModel.StateProvinceDataModel
{
ID = 2, StateOrProvinceName = "New York",
CityList = new List<Models.DataModel.CityDataModel>()
{
new Models.DataModel.CityDataModel {ID = 1,
CityName = "Manhatan"},
new Models.DataModel.CityDataModel {ID = 2,
CityName = "Woodside"},
new Models.DataModel.CityDataModel {ID = 3,
CityName = "Jackson Height"}
}
},
new Models.DataModel.StateProvinceDataModel
{
ID = 3, StateOrProvinceName = "Illinois",
CityList = new List<Models.DataModel.CityDataModel>()
{
new Models.DataModel.CityDataModel {ID = 1,
CityName = "Chicago"},
new Models.DataModel.CityDataModel {ID = 2,
CityName = "Aurora"},
new Models.DataModel.CityDataModel {ID = 3,
CityName = "Benton"}
}
}
}
},
new Models.DataModel.CountryDataModel
{ ID = 2, CountryName = "Canada",
StateOrProvinceList =
new List<Models.DataModel.StateProvinceDataModel>()
{
new Models.DataModel.StateProvinceDataModel
{
ID = 1, StateOrProvinceName = "Ontario",
CityList = new List<Models.DataModel.CityDataModel>()
{
new Models.DataModel.CityDataModel {ID = 1,
CityName = "voncouver"},
new Models.DataModel.CityDataModel {ID = 2,
CityName = "Toronto"},
new Models.DataModel.CityDataModel {ID = 3,
CityName = "Oshawa"}
}
},
new Models.DataModel.StateProvinceDataModel
{
ID = 2, StateOrProvinceName = "Quibec",
CityList = new List<Models.DataModel.CityDataModel>()
{
new Models.DataModel.CityDataModel {ID = 1,
CityName = "Montreal"},
new Models.DataModel.CityDataModel {ID = 2,
CityName = "Quibec City"}
}
}
}
}
};
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.