Learn

Well done! The city_name now shows up in the view. How does it work?

First in js/services/forecast.js, we made a new service. We used app.factory to create a new service named forecast
The forecast service needs to use AngularJS’s built-in $http to fetch JSON from the server. Therefore, we add $http to the forecast service as a dependency, like this:
```
 ['$http', function($http) {
   // ...
 }]
```
Now $http is available to use inside forecast.
Then, inside forecast, we use $http to construct an HTTP GET request for the weather data. If the request succeeds, the weather data is returned; otherwise the error info is returned.
Next in the controller, we used the forecast service to fetch data from the server. First we added forecast into MainController as a dependency so that it’s available to use. Then within the controller we used forecast to asynchronously fetch the weather data from the server and store it into $scope.fiveDay
As before, any properties attached to $scope become available to use in the view. This means in index.html, we can display the city_name using an expression as done before.

In the browser, visit https://content.codecademy.com/courses/ltp4/forecast-api/forecast.json. Looking at the format of the data in the days array, each day has four pieces of data - datetime, icon, high, and low.

Visit http://localhost:8000 to view the AngularJS app. Let’s finish the view so that it displays the weather for each day.

Notice in the view, we’re using ng-repeat to loop through each item in the days array. Inside this loop, display a day’s four pieces of data.

Remember to use ng-src to display an image.

Use the date filter to format the datetime.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?