AngularJS $http request not updating the view

Question

I am trying to update my view with a button click or with an $interval in AngularJS, I already manage to make the request work and to get the data that I needed but now that I want to make the page more dynamic I can't manage to update the view every time a user presses the button.

I am using OpenWeather API to get Weather.

To test if the view is updating I am defining two ID's, starting with London ID and then changing it to the ID of Paris.

  var WEATHER_URL = 'http://api.openweathermap.org/data/2.5/weather';
  var API_KEY = 'myAPI';
  var LANG = 'en';
  var MODE = 'json'    
  var UNITS = 'metric';

  var ID = 2643743; // London ID

Then, I set the request parms:

var requestWeather = {
    method: 'GET',
    url: WEATHER_URL,
    params: {
      id: ID,
      mode: MODE,
      units: UNITS,
      appid: API_KEY,
      lang: LANG
    }
  };

And I make a function to do the request:

function retrieveWeather() {
    $http(requestWeather)
    .then(function(response) {
      $scope.weather = response.data;
    }).
    catch(function(response) {
      $scope.weather = response.data;
    });
  }
retrieveWeather(); // Request on page load

I have an update function to test if the view updates whenever I change the ID of the city:

$scope.update = function() {
    ID = 2988507; // Change to ID of Paris
    retrieveWeather();
    console.log(ID); // <-- This prints the ID in the console, so, the function is called
  };

This is my view:

<p>{{weather}}</p>
<button ng-click="update()">Update</button>

When I click the update button nothing changes on the view, it should do another call changing the city ID, but nothing...

Thank you.

Anthony Raymond · Accepted Answer · 2017-04-10 09:22:09Z

1

Make sure your latest is updating in URL or not otherwise your code is working fine. You can try by putting your id directly in requestWeather variable.

var requestWeather = {
    method: 'GET',
    url: WEATHER_URL,
    params: {
      id: 2988507, // Change to ID of Paris,
      mode: MODE,
      units: UNITS,
      appid: API_KEY,
      lang: LANG
    }
  };

edited Apr 10, 2017 at 9:22

Anthony Raymond

7,8726 gold badges47 silver badges63 bronze badges

answered Jun 9, 2016 at 7:21

MukulSharma

2212 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henrique Alho Over a year ago

Thank you, this solved my problem! I was not updating the requestWeather var when I was clicking on the button, I was thinking that setting the id to $scope.ID or ID would solve my problem but I was thinking wrong because I forgot that when you create a var that var will not be updating if you do not update it! So, a simple way to solve this is doing the following in the update function: requestWeather.params.id = ID;

HongShaoRou · Accepted Answer · 2016-06-09 05:24:50Z

1

Cause your can't change the ID of params .Pass by value.

params: {
      id: ID,
      mode: MODE,
      units: UNITS,
      appid: API_KEY,
      lang: LANG
    }

This ID is count 2643743.Never forget it.And if you want the ID change as you change, you can use $scope.id to do that.Just like $scope.ID = 2643743; When you want to change, $scope.ID = 2988507 . And you will do it.

answered Jun 9, 2016 at 5:24

HongShaoRou

92 bronze badges

1 Comment

Henrique Alho Over a year ago

I already tried this and nothing. The strange is that the $scope.ID is changing whenl I click on the Update button but when I retrieve again the the value stays the same that was initialized, for example: I initialize $scope.ID = 2643743 // London ID and then in update function I set $scope.ID = 2988507 // Paris ID ... The id is correct but in the the requestWeather function that is not changed

zeeshan Qurban · Accepted Answer · 2016-06-09 05:25:22Z

1

Use $http.get() for updating view.

function retrieveWeather() {
$http.get(requestWeather)
.then(function(response) {
  $scope.weather = response.data;
}).
catch(function(response) {
  $scope.weather = response.data;
});}

answered Jun 9, 2016 at 5:25

zeeshan Qurban

3871 gold badge4 silver badges15 bronze badges

1 Comment

Henrique Alho Over a year ago

Thank you, this helped but not solved completely my problem.

Collectives™ on Stack Overflow

AngularJS $http request not updating the view

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related