Pre-Learning: Javascript, NodeJS, AngularJS

So I’m signed up to attend the November 2nd 2015 cohort/batch of Orange County Code School’s full stack (MEAN) Javascript web app development programming bootcamp (how’s that for great keyword linking for the school? haha) and I wanted to try understand as much as I could before class starts.

I found three amazing courses on Udemy by Anthony Alicea that I just wanted to give a shout-out to:
(If you do a quick internet search for “[course-name] discount” you’ll probably find some nice discounts for each course. I only paid $7 – $10 for each course.)

To be honest, I probably would like to go through them all again after the bootcamp is over to really take full advantage of everything that Alicia goes through in his courses because he really breaks everything down and goes in depth about all three subjects.

  1. Javascript: Understanding the weird parts
    Screen Shot 2015-10-21 at 9.42.20 PM
  2. Learn and Understand NodeJS
    Screen Shot 2015-10-21 at 9.42.12 PM
  3. Learn and Understand AngularJS
    Screen Shot 2015-10-21 at 9.42.28 PM

codecademy<em>new</em>logo

I’ve also been going through Codecademy‘s Javascript courses. I recently finished the course on AngularJS and I have to say – I never knew it would be so satisfying to debug a problem! I literally started laughing out loud and my wife thought I was being weird =)

I’ll share my joy here. I was going through the Calendar App sample problem and I was having an issue using *ng-repeat* looping over the “events” in the JSON to display the list of events in my calendar.

No events were showing up. I was also getting confused because the JSON for previous sample problems are usually an array of objects, but in this case the JSON was an object with a name:value pair, and then an array of objects as the second name:value pair.

A snippet from the calendar JSON:

{ "date": 1421384400000, "events":  [ { "name": "Casual Friday", "from": 1421384400000, "to": 1421470800000, "where": "" }, { "name": "Taco Time", "from": 1421431200000, "to": 1421438400000, "where": "Brooklyn Taco Co. 120 Essex Street New York, NY 10002" }, .. ... ] }

My view day.html was:

<!-- 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 was thinking that I couldn’t just use **`ng-repeat event in events`** since what I was trying to loop through in the JSON was an array under **`"events"`**.

My DayController looked like:

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

Anyways – I finally saw that I forgot to use an equals sign and quotations with ng-repeat. Duh! It should have been ng-repeat=" "

Small victory, but I felt so happy to figure it out. Haha

From there I was able to figure out that I had to use .notation to grab the events  values.

<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>

Well, that’s the story of my debugging joy =)

Until next time!

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!