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

First we need to add html code below .we have one text box and one button .once enter city name and press the button You will the get that corresponding city weather details.

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