Filtering a json array obtained from a web service to only contain certain elements - Angular

Question

I am creating a project which uses a HTTP get from a web service and returns an array of projects, with ID, name, description etc.

There is many projects within thi

Answer 1

The method fetchProjects() from your service could be re-used in another component. So you might want it to return all the projects, since it's the aim of this method. To fetch all the projects.

First method (recommended) :

The best thing would be to filter the data you get from the return of your HTTP Call.

In that way, you need to filter the data you get from the service to display only what you want in that component.

project.viewer.component.ts :

.subscribe(response =>{
  this.projects = response.project.
    .filter(elements => someCondition);
  console.log(response);
  console.log(this.projects);
},

Second method (not recommended) :

The only time you will want to use the .map() method to change the data you get from your service call is when you are sure you won't ever need to have all the projects, but only these ones. Of course, you could do another function that would call the same URL and not filter that data, but then you will have to maintain two methods doing basically the same call. That's why it's better to filter your data in your component and not in your service.

Nonetheless, you would need to change this part in your service :

project.service.http.ts : (should be called project.service.ts btw)

.map((response: Response) => {
  const results = response.json();
  return = results.filter(elements => someCondition);
})

---

EDIT : Here is the working solution with your class object and my own mock data :

project.service.http.ts : Initial one, don't use .filter().

fetchProjects(): Observable<any>{
  const headers = new Headers({'Content-Type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.get(this.baseUrl, options)
    .map((response: Response) => response.json())
    .catch(this.handleError);
}

project.viewer.component.ts :

You will need to adapt a bit since I took some of your code to do a fast example (my projects IDs are 'qqq' and 'aaa').

  static projectIds: string[] = ['yourIds', 'YourIds2', ...];

  projects: Project[] = [];

  constructor(private service: ProjectService) {
    this.service.fetchProjects().subscribe(response => {
      this.projects = response.filter(element => BaseComponent.projectIds.includes(element.id)); // BaseComponent was my class. Use yours.
    })
  }

project-viewer.html : Unchanged.

In my example, my service sends me 4 projects, and I filter 2 of them to only display 2. Works great, tell me if you have any problem adapting to your code.

As you can see, this is the application of the first method I mentionned first. Do not apply this to the service as well for the reasons stated in the second method.

Answer 2

you could use a pipe to filter those projects based on your condition (that passes only for those 'unique ids') and apply them on your *ngFor in the template like this,

<a *ngFor="let project of projects | uniqueOnes" class="col-1-4">

Define the pipe like this,

@Pipe({
  name: 'uniqueOnes'
})
export class UniqueOnesPipe implements PipeTransform {
  uniqueIds = [ 'id1', 'id2', 'id5'];

  transform(value: any): any {
    return value
            ? value.filter(project => { return <condition to pass only the unique projects (For ex: this.uniqueIds.indexOf(project.id) !== -1)>  })
            : value;
  }

}

More on pipes here.