DEV Community

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

Posted on • Edited on

2 1

How to filter requests in Angular?

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

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
Sean Killeen
Comment hidden by post author

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay