CODEWITHSUNDEEP
angularangular5
Kay
Kay

Reputation: 19660

Angular 5 Multiple Comma Separated HttpParams

I have set of data, users can filter the data by status. Status is committed, uncommitted, completed and failed.

To filter the data i send a get request to the backend api that looks something like this. 

/api/data/?status=uncommited,commmitted

The above call will only bring back data that is either uncommited or committed.

I am having trouble implementing this as the network tab shows my request like the following:

/api/data/?status=uncommited&status=commmitted

Can you see how the above has two "status" rather than 1 which is comma separated.

data.service.ts

get(params = null) {

    let endpoint = "<removed>/api/v1/jobs"

    let filters = new HttpParams({fromObject: params});

    return this.apiService.get(endpoint, filters);

}

data.component.ts

this.filterForm = this.fb.group({
            status: [],

        });

       this.filterForm.valueChanges.subscribe((res) => {

            this.filters = _.pickBy(res, _.identity);

            let params = this.filters;

            this.dataService.get(params).subscribe((res) => {
                this.dataSource = res.data;
            });
        });

data.component.html

form fxLayout="row" [formGroup]="filterForm" fxLayoutAlign="space-between center" fxLayoutGap="10px" (change)="filter()">

            <mat-form-field>
                <mat-select placeholder="Status" formControlName="status" multiple>
                    <mat-option value="any">Any</mat-option>
                    <mat-option value="completed">Completed</mat-option>
                    <mat-option value="uncommitted">Uncommited</mat-option>
                    <mat-option value="committed">Commited</mat-option>

                    <mat-option value="failed">Failed</mat-option>

                </mat-select>
            </mat-form-field>

Upvotes: 1

Views: 3271

Answers (1)

Miquel Canal
Miquel Canal

Reputation: 1121

You should use the %2C to separate the multiple values passed on the status parameter. Then is the server-side which performs an URL decoding to get the list of parameters. %2C is the url-encoded value of ,

Using this approach, Angular will treat it as a single parameter and your call would like: /api/data/?status=uncommited%2Ccommmitted.

Edited

let status = ['uncommited', 'commmitted']
let filters = new HttpParams();
filters = filters.append('status', status.join(', ');
// Append here as much params as needed
this.apiService.get(endpoint, { params: filters });

Upvotes: 1

Related Questions