Zeynep Düzgün

Posted on Apr 24, 2018 • Updated on Apr 26, 2018

How to filter requests in Angular?

#discuss #angular #beginners #webdev

Hi guys,
I have been using Angular for my project for a while and I wonder that is there any way to filter my request responses or request itself? I mean for example, I have an event model and this model has many session models. For that reliationship I use weak relation that session knows the event but not vise versa. For that reason, I have to get the event first, then with its id I have to get all sessions although I need only one of them. So, Can I make my response limited when I request for event's sessions and so on?
I know it sound complicated so feel free to ask for more detail about the situation.

Thank you!

Here is a code example :

getExperiences() {
    this.experienceService.listApprovedExperiences().subscribe(res => {
      this.experiences = res;
      for (const experience of res) {
        this.getSessionList(experience.id);
    });
  }


  getSessionList(id: string) {
    this.experienceService.getSessionListByExperienceId(id).subscribe(res => {
      if (res.length !== 0) {
        this.session.set(id, res[0]);

      } else {

      }
    });
  }

Top comments (5)

Michael De Abreu • Apr 27 '18 • Edited

If you need to switch between multiple possible values, I think you don't have a choice. But, if you want only to emit when you have res.length larger than 0, I think you can use filter operator.

getExperiences() {
  this.experienceService.listApprovedExperiences().subscribe((res) => {
    this.experiences = res;
    for (const experience of res) {
      this.getSessionList(experience.id);
    }
  });
}

getSessionList(id: string) {
  this.experienceService.getSessionListByExperienceId(id).pipe(
    filter(res => res.length > 0), // only emits a value if length is larger than 0
  ).subscribe(res => {
    this.session.set(id, res[0]);
  });
}

You could also map operator to do something like

getExperiences() {
  this.experienceService.listApprovedExperiences().subscribe((res) => {
    this.experiences = res;
    for (const experience of res) {
      this.getSessionList(experience.id);
    }
  });
}

getSessionList(id: string) {
  this.experienceService.getSessionListByExperienceId(id).pipe(
    map(res => res.length > 0 ? res[0] : aDefaultValue ) // emits res[0] data, or a default value if res is not an array like.
  ).subscribe(data => {
    this.session.set(id, data);
  });
}

Or you could combine both operators and do something like

function getExperiences() {
  this.experienceService.listApprovedExperiences().subscribe((res) => {
    this.experiences = res;
    for (const experience of res) {
      this.getSessionList(experience.id);
    }
  });
}

function getSessionList(id: string) {
  this.experienceService.getSessionListByExperienceId(id).pipe(
    filter(res => res.length > 0), // emits only if res.length is larger than 0
    map(res => res[0]), // emits the actual data in res[0]
  ).subscribe(data => {
    this.session.set(id, data);
  });
}

There are several operators that you can use with rxjs. Just notice that some of them are deprected in recent version 6, and you may find them in current documentations, and tutorials. However, version 6 was release a couple of days ago, so you probably won't need them.

Zeynep Düzgün • Apr 27 '18 • Edited

Thank you so much!! Your comment was quite useful for me. So , I will try my best and after reviewing the documentation,I will update the post the possible solutions that comes with Angular 6 :)

Michael De Abreu • Apr 27 '18

Just for you to notice, I'm referring to rxjs@6, that just be casualty happens to have the same number version as Angular, but this breaking change is not because Angular@6

Zeynep Düzgün • Apr 27 '18

Oh, I get it. My bad.

Comment hidden by post author - thread only accessible via permalink

Sean Killeen • Sep 16 '18

Hey! I've noticed that in this post you use "guys" as a reference to the entire community, which is not made up of only guys but a variety of community members.

I'm running an experiment and hope you'll participate. Would you consider changing "guys" to a more inclusive term? If you're open to that, please let me know when you've changed it and I'll delete this comment.

For more information and some alternate suggestions, see dev.to/seankilleen/a-quick-experim....

Thanks for considering!

Some comments have been hidden by the post's author - find out more

DEV Community

How to filter requests in Angular?

Top comments (5)

Read next

A Simple Guide to Docker Compose & Multi-Container Applications

Storing passwords safely (C#)

Introducing Visual Copilot 2.0: Design to Interactive

Storybook: The Workshop for Modern Frontends