Learn

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

  1. First in js/services/forecast.js, we made a new service. We used app.factory to create a new service named forecast
  2. 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.
  3. 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.
  4. 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
  5. 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.

Instructions

1.

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.

2.

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.

3.

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.
Already have an account?