At end of Services I, city_name is not displayed


#1

Although the exercise passes, I see unrendered placeholder instead of the city name. - I see "{{ fiveDay.city_name }}"

I have even tried displaying another variable but I only see "{{ example_var }}".

(Edited to include code)

Here's my code: index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="ForecastApp">

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>{{ fiveDay.city_name }}</h1>
            <h2>5-day forecast</h2>
            <div class="forecast" ng-repeat="day in fiveDay.days">
              <div class="day row">

                <!-- datetime -->
                <div class="weekday col-xs-4">

                </div>


                <!-- icon -->
                <div class="weather col-xs-3">

                </div>

                <div class="col-xs-1"></div>


                <!-- high -->
                <div class="high col-xs-2">


                </div>


                <!-- low -->
                <div class="low col-xs-2">

                </div>
              </div>
            </div>
          </div>
        </div>
        </ul>
      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Services -->
  <script src="js/services/forecast.js"></script>

    <!-- Directives -->


  </body>
</html>

forecast.js

app.factory('forecast', ['$http', function($http) { 
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

MainController.js

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
  forecast.success(function(data) {
    $scope.fiveDay = data;
  }
}]);

#2

I have learned that most of the errors and bugs in the exercises have been due to mistakes in spelling or not properly closing open { },[ ] and ( ). Even if you copy and paste from the instructions, it is good to verify.

Check and match brackets in your MainController.js, I had the same problem until I made sure all are paired properly.

Corrected:

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
  forecast.success(function(data) {
    $scope.fiveDay = data;
  });
}]);

#3

/*app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
forecast.success(function(data) {
$scope.five**D**ay = data;
});
}]);
*/

if i'd have copy and pasted the code I would have seen the city name appearing but i wrote it out myself as I learn more this way, unfortunately for me some of my camel case didn't come through so I passed but the city names weren't showing. So i copied your code above and compared low and behold it was one letter 'D' that was the issue. Cheers


#4

A post was split to a new topic: App is not defined at VM1419 forecast.js:1


#6