I need help with data-binding and updating the page after an API call

I’m using a tiny bit of angular (just a controller and a module) to make the weather app to try to integrate my studies of that framework, and my problem is that I am fine using promises to pipeline data from one api call to the next, but then after that data is returned, I can’t update the page with the data. Here is the folder on Github:


If you download the files and run it in a browser you will see in the console that it is logging the correct data from the API’s but it is not updating the view.

PLEASE somebody help me. I’m down to use a different method other than using an Angular controller and the interpollation ({{}}) but I don’t know how. Please help!

I haven’t used Angular 1.6 in a long time (and I was never an expert), but I think you need to make your call to $scope.apply within your $.get() callback. The way you have it now, apply runs the asynchronous function get and nothing else. Also, this part is not valid JavaScript:

return replaceLocal, replaceTemp, replaceWeather, replaceGraphic;

$.get does not need to return anything.

1 Like

Thanks! I’ve got it functional now - I should have been using the Angular $http({method: ‘URL’, ‘url’:…}) which automatically returns a promise and also automatically applies $scope.$apply. I also was mixing some Angular and Jquery calls that weren’t recognized by the others. Thanks for your help! I’m going to try to rewrite it now using only jquery because it doesn’t work in codepen for submission…