Search code examples
arraysangularfilterobservable

Observable with another included array with an array-filter


I have got an observable with Notes

this.notes$ = this.NoteService.notes$

notes$ = 

0: {id: 4, user_id: 1, body: null, reminder: null, created_at: '2022-08-22T17:44:37.000000Z', …}
1: {id: 3, user_id: 1, body: 'die neuere', reminder: null, created_at: '2022-05-22T10:04:26.000000Z', …}
2: {id: 2, user_id: 1, body: 'Klappt das mit den Notizen?\n\n\nAuch mit Absätzen?', reminder: '2022-05-22 00:00:00', created_at: '2022-05-15T19:34:36.000000Z', …}
3:
body: "Meine Lieblingsnotiz"
created_at: "2022-05-15T18:13:43.000000Z"
id: 1
reminder: null
tags: Array(2)
0: {id: 1, name: 'Arbeit', slug: 'arbeit', created_at: null, updated_at: null, …}
1: {id: 4, name: 'Backlog', slug: 'backlog', created_at: null, updated_at: null, …}
length: 2
[[Prototype]]: Array(0)
title: "Test Notiz"
updated_at: "2022-05-15T18:13:57.000000Z"
user_id: 1

Now, I have switches in the html page, where I like to activate a filter for the tags. I push the filter to an additional array,

['backlog', 'arbeit', 'email']

but I find no way to the filter the observable by the array filter. I was thinking about something like

this.notes$ = this.NoteService.notes$.pipe(
      map(notes=> notes
        //.filter(t=> (!t.tags || t.tags.some(ai => this.filterTag.includes(ai))))   
        //.filter(t=> t.tags?.length > 0 && t.tags?.includes(this.filterTag) 
        //.filter(t=> t.tags!=undefined && t.tags.includes(this.filterTag))
        ))

Maybe you have an idea for me? Thanks in advance


Solution

  • I fixed it in a different way

    this.notes$ = this.NoteService.notes$.pipe(
          map((notes => notes
            .filter(t=> this.filterTaginNote(t)
            
          ))))
      ;
    
    filterTaginNote(note: Note){
        if (this.filterTag.length == 0){return true}
        if (note.tags){
          for(var i = 0; i < note.tags?.length; i++){
            if (this.filterTag.includes(note.tags[i].slug)){
              return true;
            }
          }
        }
        return false;
    
      }