Events list not showing in Calendar from view/day.html


#1

Hi everyone!

I'm having trouble looping over the "events" in the JSON to display the list of events in my calendar. No events are showing up when I load https://localhost:8000/
I think the controller is correct since I'm able to pull in the correct date.

My day.html looks like this:

<!-- Format a date so it displays in the format "Friday 1/16" -->
<h2 class="date"> {{ day.date | date: 'EEEE M/dd' }} </h2>

<!--
TODO: Loop through events and display each one with this HTML-->

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

I'm thinking that I can't just use ng-repeat event in events since what I'm trying to loop through in the JSON is array under "events". I don't know what to do though.

My DayController looks like this:

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

I would appreciate your help!


#2

@duncanleung I had the exact same problem.. I was also thinking maybe the names are colliding or something. I tried to change it, with no success. I keep in touch if I get to know how to solve it :smile:


#3

@duncanleung, So yeah I did manage to solve it.. Most of it was fault from missing brackets here n there, spelled wrong on some variable e.g. 'aoo' instead of 'app' etc. I'm trying not to copy code and do it fast, that's why I encountered these problems.

Keep a watch on your code and try to compare it to.. let's say Outbox 2 assignment :smile:


#4

Your mistake is probably somewhere else, and its probably a little one, like maybe a spelling mistake.

Start by trying to display something ('coincoin' for instance) in your view, if it shows then its a problem with your data, if it doesn't, then it's your entire view that is not displayed, so it could be your controller which doesn't get right data from your factory, or it could be you factory that is bugy... Much possibilty. :yum:


#5

Hi everyone! Thank you very much for your feedback.

I managed to get the events to finally show up!

Just so that this thread has some conclusion, my mistake was in my day.html and how I was using ng-repeat. I forgot to use an equals sign and also quotations =)

This code allows me to repeat over events.
I've also correctly used date to format out the time.

<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: "h:mma"}} </span> - <span class="to"> {{ event.to | date: "h:mma" }} </span></p>
  </a>
</div>

Thanks again everyone for the feedback! =)


#6

Did you manage to print out the next part, when you visit each date?

I have a problem, I try to print it like this in event.html

<div class="event-detail">
  <h2 class="event-name"> {{event.name}} </h2>
  <p class="time"><span class="from"> {{event.from}} </span> - <span class="to"> {{event.to}} </span></p>
  <p class="where"> {{event.where}} </p>
</div>

my controller EventController look like this:

app.controller('EventController', ['$scope', 'events', '$routeParams', function($scope, events, $routeParams) {
  events.success(function(data){
    $scope.event = data[$routeParams.id];
  });
}]);

I have no success so far.. tried to get ideas from previous assignments with no result. Care to share some ideas?


#7

Hey Alex. I've pasted my code below.

What you need to do is edit your EventController.js so that you are using .notation to get events from the JSON.

$scope.event = data.events[$routeParams.id];

I think that should do it for you?

my EventController.js

app.controller('EventController', ['$scope', '$routeParams', 'events', function($scope, $routeParams, events) {
  events.success(function(data) {
    $scope.event = data.events[$routeParams.id];
  });
}]);

my event.html

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

#8

Thanks a lot! That did it.

Cheers!


#9

Thanks for the help and guidance in the comments above, it really helped me get through this challenge!


#10

Arrrrgh!
Thanks, that's what I get for trying to learn JavaScript and AngularJS all at once. :smile:


#11

Hey, I found in your code one mistake:) in event.html .from you should write event.from not "to" :)))