DEV Community

Zeynep Düzgün
Zeynep Düzgün

Posted on • Edited on

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 {

      }
    });
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
michaeljota profile image
Michael De Abreu • • 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.

Collapse
 
zeyduzgun profile image
Zeynep Düzgün • • 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 :)

Collapse
 
michaeljota profile image
Michael De Abreu •

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

Thread Thread
 
zeyduzgun profile image
Zeynep Düzgün •

Oh, I get it. My bad.

Collapse
 
seankilleen profile image
Info Comment hidden by post author - thread only accessible via permalink
Sean Killeen •

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

Read next

best_codes profile image

CSS has a new logo (and new features)! 🎉

Best Codes -

hmissb profile image

🚀 We’re Hiring: .NET & Angular Developer! 🌟

HM Innovation Solutions -

radchenko profile image

Exploring dev.to's Hidden Features: Upload a Video. What?

Vladislav Radchenko -

oliverbennet profile image

What's a Quickie Post?

Oliver Bennet -