Filter data object by day Angular JS

Question

The object in question looks like this

{{
    schedule['Monday']
    schedule['Tuesday']
    ....
}}

I need to:

get schedule['{{date | 'EEEE'}}']
highlight it in html template
display something like {{date | 'EEEE'}} 's schedule is {{schedule['{{date | 'EEEE'}}]}}

I'm trying to use a loop to create this for days of the week. i.e use ng-repeat and filter by current day.

This needs to be done to write different HTML for current day scenario vs. other days - example Add a custom class.

Estus Flask · Accepted Answer · 2015-08-17 18:18:00Z

2

The assumption that the object will be iterated in particular order (apparently, days of week should) is a mistake here. It will cause problems for both Angular-specific and JS code.

Always stick to arrays when iterating objects:

<div ng-repeat="day in days | filter:'Monday'">{{ schedule[day] }}</div>

It is preferable to explicitly define

$scope.days = ['Monday', 'Tuesday'];

rather than

$scope.days = Object.keys($scope.schedule);

exactly for the reasons stated above.

Example: http://plnkr.co/edit/EnntuwwDgKIvxWRubTCQ?p=preview

edited Aug 17, 2015 at 18:18

answered Aug 14, 2015 at 14:20

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Loser Coder Over a year ago

We don't need to iterate in particular order. The data always comes in order though. I just want a filter to check the current day and then display the schedule for the current day using schedule['Friday'] Instead of saying filter:'Monday' can I check for the current Day

Estus Flask Over a year ago

If it is JSON data, then you can't rely on its order, too. It is not clear what you're asking for. What was 'EEEE' in the original question? You can do {{ schedule[today] }} if it is the only day you want.

Loser Coder Over a year ago

I am trying to do this: <div ng-repeat="day in days | filter: today">{{ schedule[day] }}</div> I want to get an additional class added when {{schedule[day]}} is for today. And not add that for the rest of the days.

Estus Flask Over a year ago

Then there's no need in filter. <div ng-repeat="day in days" ng-class="{ highlight_class_name: (day == today) }">{{ schedule[day] }}</div>

Loser Coder Over a year ago

This is not working for me. schedule[day] is not working as expected. Might I ask for a demo example

Collectives™ on Stack Overflow

Filter data object by day Angular JS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related