Data is not displayed in view


#1

FOR THE LOVE OF GOD
after an hour and a half looking for my mistake I even copied code that suppose to work from other coders here, still nothing!!

index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
      <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    

  </head>
  <body ng-app="CalendarApp">
    <div class="header">
      <div class="container">
        <img src= "img/logo.svg" width="51" height="54">
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div ng-view></div>
			
        

      </div>
    </div>

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

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

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

  </body>
</html>

app.js

var app = angular.module('CalendarApp', ['ngRoute']);
app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    controller:'DayController',
    templateUrl:'views/day.html'
  })
    .otherwise('/');
});

dayController.js

    app.controller('DayController', ['$scope','events', function($scope,events) {
            events.success(function(data){
          $scope.day = data;
        });
    }]);

day.html

<h2 class="date"> {{day.date|date:EEEE, d, M}} </h2>


<div class="event" ng-repeat="event in day.events">
  <a href="#/{{$index}}">
    <h3 class="name">{{event.name}}  </h3>
    <p><span class="from">{{event.from | date}}  </span> - <span class="to">{{event.to | date}}  </span></p>
  </a>
</div>

events.js

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

event.html

<div class="event-detail">
  <h2 class="event-name">{{ event.name }}</h2>
  <p class="time"><span class="from"> {{ events.from | date: "h:mma" }} </span> - <span class="to"> {{ event.to | time }} </span></p>
  <p class="where">  </p>
</div>

I have checked all the discussions about this project. my code seems ok to me. just cant find why it wont display the data.


#2

Hi!

Do you mind sharing a link to the exercise so I/we look at it?

Thank you!


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.