Creating wrapper DIV using loops and ng-class in AngularJS

Question

I'm currently working on creating a dynamic timeline using AngularJS. The data from my timeline is fetched from a JSON file, which I have already been successfully able at configuring. Here is what I currently have on PLNKR: http://plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8

This is my current navigation:

   <nav id="sticky-navigation">
      <ul>
          <li><a href="#decade-1960s">1960</a></li>
          <li><a href="#decade-1970s">1970</a></li>
          <li><a href="#decade-1980s">1980</a></li>
          <li><a href="#decade-1990s">1990</a></li>
          <li><a href="#decade-2000s">2000</a></li>
          <li class="active"><a href="#decade-2010s">2010-Now</a></li>
      </ul>
  </nav>

I basically want to create wrapper divs for the unique ID's of "decade-1960s", "decade-1970s" etc so that the user can use the navigation to efficiently navigate to the decade they are most interested in looking at. The date is parsed from the JSON file, so I am wondering it there is another to fetch the year from the JSON, organize the events according to particular decades, and then add a wrapper for each decade.

Thanks very much! I know it sounds very complicated! But I'm more of a front-end developer and designer, not so much a back-end programmer.

Morry

Answer 1

Here is the general idea:

This is similar to paging. Get the decade from all your records (events) and then group them into pages (one per decade). Once your repeater relies on this eventsByDecade array, angularjs will do all the heavy lifting.

Here are some guidelines:

After you populate your events variable with your json file, create an array and populate it depending on the dates. For this you will need to check event.theDate.getFullYear() on each event.

Then, depending on the year you can then get the decade, maybe using year.substring(0,2) (use just the first 3 digits).

Next, group them by decade in an array and then assign each decade array into a master eventsByDecade array.

Finally, change your repeater from:

ng-repeat="event in events | filter:query | orderBy:orderProp:true"

to use your "paged" array:

ng-repeat="event in eventsByDecade[currentIndex] | filter:query | orderBy:orderProp:true"

Here, currentIndex will be set whenever the links are clicked, for example:

<li><a href="#decade-1960s" ng-click="currentIndex = 1">1960</a></li>

Update: Manipulating json

JSON Evaluates to JavaScript Objects. So you can iterate over your events like this:

for(var event in events){
 event.theDate; //this object should have properties such as the date
}

Tyche

Oh wow, thank you for much for the comprehensive reply. I really appreciate this. I'm going to try this out later and see how it goes before confirming that this question has been answered. Thanks so much! – Morry

I'm having trouble and have been searching on StackOverflow for similar questions without any success. I'm having trouble getting the values from the JSON into the controller -- after getting the $scope.events, how do I more specifically get the "date" value from JSON? – Morry

I'm currently having trouble with the function (pardon me for my lack of knowledge/experience -- I'm still pretty new at this!). Right now, I am able to get only the year from each of the date events, but I'm struggling with inserting each of them into their proper decade array, and then inserting those decade arrays into a master array. – Morry

Having a little bit of trouble, @Ulises. Can you look at this real quick? plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8 – Morry

It doesn't see much different from the original posted with your question, did you forget to save/update it? – Tyche

Sorry about that! I can't quite get it to work with the master array grouped. – Morry

Hey do you think you could help me ? – Morry

Hey sorry, I've been a little busy. I did look at your code though. I would map decades to small indexes starting at 0. Versus using the decade as an index. Also, when grouping the decades take into account that you will have an array of arrays. The main array is indexed – Tyche

.. By the decades, the second is the array of events. You may be better off asking a separate question in regards to this specific function. – Tyche