CODEWITHSUNDEEP
angularangular-servicesangular-httpclient
user9847788
user9847788

Reputation: 2445

How to send GET request to HTTP Client to retrieve data based on a parameter?

In my Angular app, I am able to send a HTTP GET request to a JSON-server & retrieve data from a JSON file.

Here is some of the code in my JobService at the moment:

getJob(id: number): Observable<IJob> {
    return this.httpClient.get<IJob>(`${this.baseUrl}/${id}`)
        .pipe(catchError(this.handleError));
}

getJobs(): Observable<IJob[]> {
    return this.httpClient.get<IJob[]>(this.baseUrl)
        .pipe(catchError(this.handleError));
}

And here is the IJob interface:

export interface IJob {
    id: number;
    title: string;
    description: string;
    employeeId?: number;
    managerId: string;
}

Here is my component code that calls the above methods:

loadExistingJobs() {
    this._jobService.getJobs().subscribe(
        (listJobs) => {
            this.jobs = listJobs;
        },
        (err) => console.log(err)
    );
}

getJob(id: number) {
    this._jobService.getJob(id).subscribe(
        (job: IJob) => {
            this.editJob(job);
            this.job = job;
        },
        (err) => console.log(err)
    );
}

Using the above code, I am able to retrieve all existing jobs & a specific job based on the jobId.

Now, I need to figure out how to retrieve all the jobs based on the managerId. I.e. I want to only display the jobs where the ManagerId = 1.

Can someone please tell me what needs to be done to do this?

Do I need to send a different GET request with a ManagerId parameter, or do I filter the data returned from getJobs?

Upvotes: 1

Views: 212

Answers (3)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

If you need to implement separate API for getting Jobs Based on managerId you have to change your Backend API as well. But it can be achieved simply as follows. filter data which you got from getJobs API call based on managerId.

filteredJobs: any;
managerId: string = "1";

    loadExistingJobs() {
        this._jobService.getJobs().subscribe(
            (listJobs) => {
                this.jobs = listJobs;
                this.filteredJobs = this.jobs.filter(job => job.managerId === this.managerId);
            },
            (err) => console.log(err)
        );
    }

Upvotes: 1

Saif Jerbi
Saif Jerbi

Reputation: 675

This issue depends on your REST API and your Design

If you can add new REST API, it's recommended to add a new REST Service that return "Jobs" based on "ManagerID" (The optimized solution)

If not, you can filter the returned list by: 

loadExistingJobsByManagerId(managerId: string) {
    this._jobService.getJobs().subscribe(
        (listJobs) => {
            this.jobs = listJobs;
            this.filtered = listJobs.filter(job => job.managerId === managerId);
        },
        (err) => console.log(err)
    );
}

Upvotes: 2

Sandeep
Sandeep

Reputation: 1058

This I believe is more related to APIs that you're using and exists. Here you can do either:

  1. call another API (IF exists) who will accept "ManagerID" and will return all the jobs based on the Manager Id.
  2. Otherwise You can filter data from getJobs API (IF pt. 1 API doesn't exist).

Hope it'll help you to get idea. Also you may like to ask your API developer of this project about above suggested API(pt. 1).

Upvotes: 1

Related Questions