How To Get The Weather Information From A Public Weather API Using MVC And Angular

vijay kumar pydi

11 Comments

Join the conversation! Your thoughts help the community grow.

First Last8y ago
You have to use an angularjs application with MVC controller. What are the steps? Create an empty MVC project and then add in a html file?
Viknaraj Manogararajah8y ago
nice one..
- vijay kumar pydi8y ago
  Thank you viknaraj
ishaq shaik8y ago
Nice vijay it is very simple and usefull thanks its helped me alot
- vijay kumar pydi8y ago
  Thank you ishaq
gouse mohiddin8y ago
Good Article Vijay
- vijay kumar pydi8y ago
  Thank you gouse
Jignesh Kumar8y ago
Nice one ...
- vijay kumar pydi8y ago
  Thank you Jignesh
Karthik Chintala8y ago
Good share vijay
- vijay kumar pydi8y ago
  Thank you karthik

First we need to add html code. Below, we have one text box and one button. Once you enter the city name and press the button you will the get that corresponding city's weather details.

You have to use an angularjs application with MVC controller.

HTML Code

<div class="col-md-4">
<div class="whetherad">
<b> City:</b> <input type="text" ng-model="cityName" placeholder="Enter City Name" />
<button ng-click="getWeatherInformation()">Get Details</button><br /><br />
<b>CityName:</b>{{city}}<br /><br />
<b>Temperature:</b>{{temprature}}<br /><br />
<b>Clouds:</b>{{clouds}}<br /><br />
<b>Weather:</b>{{weather}}<br /><br />
<b>Humidity:</b>{{humidity}}<br /><br />
<b>Wind:</b>{{wind}}<br /><br />
<b>WindValue:</b>{{windValue}}<br /><br />
<b>Speed:</b>{{speed}}
</div>
</div>

You will get the JSON response from your controller. From that json you can extract the required information using AngularJS code below.

JS Code

//get weather information
//
$scope.getWeatherInformation = function () {
if ($scope.cityName == undefined || $scope.cityName == null || $scope.cityName == "") {
alert("Please enter city name");
return false;
}
$http.get("/Registration/GetWeatherReport?cityName=" + $scope.cityName).then(
function (response) {
$scope.temprature = response.data.current.temperature.value;
$scope.humidity = response.data.current.humidity.value;
$scope.wind = response.data.current.wind.direction.name;
$scope.windValue = response.data.current.wind.direction.value;
$scope.speed = response.data.current.wind.speed.value;
$scope.weather = response.data.current.weather.value;
$scope.clouds = response.data.current.clouds.name;
$scope.city = response.data.current.city.name;
},
function (error) {
})
}

First you need to add an empty MVC5 controller named WeaterController.

In MVC Controller we have GetWeatherReport method. We need to pass cityName from AngularJs and also we require AppId. We need to register in open weather site https://openweathermap.org/api. Once you register you will get the AppId. We need to pass it as parameter to the public api.

We will get the xml response from weather api, then we need to deserialize into JSON. In that JSON you will get @ symbol in every key. If we return the same JSON to the front end you will not get the keys.T o get the keys we need to remove the @ symbol before sending a response to the client side.

MVC Code

[HttpGet]
public string GetWeatherReport(string cityName)
{
string json = string.Empty;
string createRequest = "http://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&mode=xml&units=metric&appid=8u4ccd72e55b5b394d982135ef711fg4";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(createRequest);
try
{
using (HttpWebResponse httpWebResponse = (HttpWebResponse)request.GetResponse() as HttpWebResponse)
{
StreamReader streamReader = new StreamReader(httpWebResponse.GetResponseStream());
JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings();
jsonSerializerSettings.MissingMemberHandling = MissingMemberHandling.Ignore;
string data = streamReader.ReadToEnd();
XmlDocument doc = new XmlDocument();
doc.LoadXml(data);
json = JsonConvert.SerializeXmlNode(doc).Replace("@", "");
}
}
catch (Exception ex)
{
throw;
}
return json;
}

The final output is shown below.

OutPut