how can I group in the frontend some data I get from the API? AngularJS

Question

started working not too long ago with angularJS so I still have some stuff I don't get.

Gonna try to be as simple as possible in the explanation, I'm working on small part of a bigger project, to get me going with angularJs, and I'm stuck on this.

Is there a good way to do the following in the frontend without touching API/Database?

I have an interface that returns me some data from the backend, When a user creates a new entry in the app, it registers the userID, activityID, the start date of the activity and the end date. So what I get is an array with some params like ID, startDate and endDate,

    activities [ 
    {id: 1, activityID: 5, startDate:1515628800000, endDate: 1515628800000},
    {id: 2, activityID: 4, startDate:1515628800000, endDate: 1515628800000}
    {id: 3, activityID: 8, startDate:1515628800000, endDate: 1515628800000},
    {id: 4, activityID: 2, startDate:1515628800000, endDate: 1515628800000},]

(start dates and end dates are the same just for example)

I just need some help with the logic, if I can access this interface, and I have a function that takes as arguments 2 dates, one starting date and one ending date, and returns me the above array, with all the activities filtered by the range I put in the function, how can I order these data by weeks?

What I mean is, if I do a

<div class="tableRow" ng-repeat="t in vm.activitiesData.activities">

(activitiesData.activities this is the already filtered interface, with only entries for january in this case),

Currently this returns me X Divs depending on how many activities there are.

What I want to achieve, is to return somehow for the filtered activities in January, 5 DIVS representing each week in january, and inside those divs, the data divided by week.

So I would need to come up with an ng-repeat that creates a DIV for a week, if there is data in that week.

If my actual result with the ng-repeat above is:

Activity 1
Activity 2
Activity 3
Activity 4

I want to get

Week 1
  Activity 3
Week 2
  Activity 4
  Activity 1
Week 4
  Activity 2

is this possible without touching the backend? As I said before, all that I can get now is an array of activities within a specific month, but need to figure out how to sort them in weeks while I use a ng-repeat to generate the data in the view.

Hope it s clear what Im trying to do, sorry for the confusion, thank you

edit: divs structure for my table:

<div class="activityTable" ng-repeat="t in vm.activitiesData.activities">
<div class="activityHeaderContent"> Week 01 </div>
<!-- this is the header with the week number, now all the data for that week should be put in the next div -->

<div class="activityRowContent" ng-repeat="nested ng repeat goes here"> Activity 1 </div>
</div>

so the result I want, is if we keep the previous example, where it generates 3 weeks and puts the activity in the respective week, to show 3 different DIVs, with the titles Week 1, Week 2, Week 4, and group those activities based on their start/end date in the correct Week

(to help with the _interface_) you need a [`groupBy`](https://github.com/a8m/angular-filter) filter. It will take a property of selected object as a grouping parameter. So you need to extend your JSON with some logic that adds another property: `activities[i].week = x;`. Here is an [example](https://plnkr.co/edit/4ZTlctYodsJUGX0J4vkf?p=preview) of how groups will be displayed (without weeks yet). Instead of `$index` use `key` though — Aleksey Solovey, Mar 27 '18 at 13:54
Now that I think about it, I should have just added such parameter manually myself. Here is [another example](https://plnkr.co/edit/ExKchW2hO9ACLfE9Z7xi?p=preview) with your structure — Aleksey Solovey, Mar 27 '18 at 14:01
thank you for the answer, but that requires me to change something in the backend adding the week number, for now I need to find a solution without changing it, if I can't, I ll move to the next task until I can get some modification in the DB/Backend, My idea was to work with MomentJS somehow, as I have the timestamp of both the starting date and ending date, and group stuff like that, as all the data is already grouped by month, just need to regroup it by weeks, thank you anyway — AJ-, Mar 27 '18 at 14:09
you can change it in the controller (after it arrived from your backend). One for loop to update the values. It just depends on how you find your weeks in the first place (with or without moment.js) — Aleksey Solovey, Mar 27 '18 at 14:13
I should use momentJS for the weeks, I don't think just looping index+1 to print the week number is a good idea, could you make me an example for the controller part? thank you — AJ-, Mar 27 '18 at 14:34
use map function in your controller to modify response and then try to render in html — Anil Arya, Mar 27 '18 at 19:31

score 0 · Answer 1 · answered Mar 27 '18 at 14:19

0

You can get the number of the week with momentJS function moment().week().

Then you will have to use two nested ng-repeats, using the filters groupBy to group by week and orderBy to display it in order.

answered Mar 27 '18 at 14:19

Gobli

327
2
12

how can I groupBy week if I can't add new properties to my interface?all the rest is clear, I can make divs with the week number in the header with moment().week() but how can I put my data inside the correct div? how do I group them? could you give me an example? – AJ- Mar 27 '18 at 14:33

surendra Kandira · Answer 2 · 2018-03-27T14:36:23.097

0

You can get number of week (week no) with date format

<div class="tableRow" ng-repeat="t in activities">
      {{t.id}}-{{ t.endDate | date : "ww" }}
      </div> 
</div>

<ul ng-repeat="(key, value) in activities | groupBy: 'startDate'">
  week : {{ key }}
  <li ng-repeat="t in value">
    activityID: {{ t.id }} 
  </li>
</ul>

You should take help blow URL using group by

How can I group data with an Angular filter?

edited Mar 27 '18 at 14:36

answered Mar 27 '18 at 14:22

surendra Kandira

587
2
5
22

yes, that I was aware, my problem is, once I create the divs with the "weeks" how can I fill my data in the correct div? so all the data that has startDate and endData belonging in a week, how do I put them in there ? – AJ- Mar 27 '18 at 14:29
I think this is on the right track, but I never saw the (key, value) format, can you help me with that? with an actual example with the data I've given? gonna update my initial post in 5min with an example structure with the divs, so you can just fill it and I should understand – AJ- Mar 27 '18 at 14:54

how can I group in the frontend some data I get from the API? AngularJS

2 Answers2