0

I am returning multiple CartItem objects from my Django backend that have a delivery_date field. On the Angular8 frontend I want to break up all the CartItem objects by delivery_date and display them on the browser, separated by date headings.

I thought that I could just do this in in the html tag but I cant seem to get the syntax correct. My other approach was to write a my own filter? I see a lot of AngularJS info on this but not so much Angular 8. I also thought I could use the pipe or map function, but i dont think you can use multiple of those which i would need because i want to break up to multiple dates.

component.ts

  orders;
  filterargs = {delivery_date: '2020-06-12'};  

  ngOnInit() {
    this.getrestaurantorders()
  }

  getrestaurantorders(id){
    this.orderservice.restaurantorders(id).subscribe(
      x => this.orders = x
    )
  }

}

latest html attempt

<h1>Date1</h1>
<div *ngFor="let order of orders | filter: {delivery_date: '2020-06-12'}">
(also tried this: <div *ngFor="let order of orders | filter: filterargs">)

    Order:{{order.xxx}}<br>
</div>

<h1>Date2</h1>
<div *ngFor="let order of orders | filter: {delivery_date: '2020-06-13'}">
(also tried this: <div *ngFor="let order of orders | filter: filterargs">)

    Order:{{order.xxx}}<br>
</div>

With the latest html tag filter attempt i get Error: The pipe 'filter' could not be found!, which makes me think i need to create a whole pipe class. Seems like there should be an easy filter that i am missing.

EDIT:

  getrestaurantorders(id){
    this.orderservice.restaurantorders(id).subscribe(
      x => this.orders = x,
    )
    this.filterday()
  }

  filterday(){
    this.orders = this.orders.filter(order => order.delivery_date == '2020-06-12')
  }
}

Adding filterday() which should filter through the CartItems. Since i need to wait for the observable to finish first, i was going to try this SO approach: Create and then subscribe to a Subject

ratrace123
  • 976
  • 4
  • 12
  • 24
  • The reason why you don’t see information about filter or order by pipe in angular 2+ because the angular team recommends avoiding using pipes for those operations. Instead they recommend to just filter/sort data separately: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe . Just use Array.prototype.sort to update a copy/slice of property orders. – Alexander Staroselsky Jun 12 '20 at 03:54
  • ok so i should scrap the filtering at the html tags and filter in the component (from that link). So now i just need to figure out how to filter in typescript, will that function above work? looks like javasript from what i read. EDIT: also because the data comes in async i would need to wait for it to complete before filtering in the component – ratrace123 Jun 12 '20 at 04:09
  • There is no generic filter pipe such as in AngularJS because generic filter pipe with dynamic property name = bad for performance and bad for tree-shaking, but you can write your specific filter pipe for this situation without dynamic property name such as: FilterByDeliveryDatePipe – HTN Jun 12 '20 at 06:09
  • let order of orders, So i assume all your values are order in json format. (if not just make it, since u already have key value pair) now run a json search and filter out the row that contain your date. then do ngfor or any other thing you want. goto your typescript and take a new var search order which should contain only value of selected date from orders, then do ng for on it [ note dont use filter, filter works on js, and furthermore, avoid using pipe in html , if u are forced to do it, use it on typescript, otherwise in many cases u cant debug properly seeing console ] –  Jun 12 '20 at 06:43
  • thanks for the input, i am taking the approach found in my EDIT – ratrace123 Jun 12 '20 at 14:48

0 Answers0