Array in URL parameter (Angular)

Question

I have a filter with checkboxes where after checking added parameter to the url like this

https://localhost:8080/api/records?page=0&locationIds=1,2

But want to be like this

https://localhost:8080/api/records?page=0&locationIds=1&locationIds=2

As I understood thats 'cause I pass an Array to URL parameter and my main thought is to rewrite this forEach not for 'key', but for 'httpParams[key]' in file candidate.service.ts(not sure) but don't know how to make it right. Here is my code:

filter.service.ts. (In this service filter returns as array)

filterByValues(filterType: string, value): FilterParams {
  if (!this.filterParams[filterType]) {
    this.filterParams[filterType] = [value];
  } else if (this.isValueInParams(this.filterParams[filterType], value)) {
    this.filterParams[filterType] = this.removeValueFromParams(this.filterParams[filterType], value);
  } else {
    this.filterParams[filterType].push(value); //return  [1, 2]
  }
  return this.filterParams;
}

isValueInParams(params, value) {
  return params.some(item => value === item);
}

I use this service in other file, when I check some of checkboxes, this id added to Array

candidate-filter.ts

filterByLocation(location: Location) {
  const filtersToEmit = this.filterService.filterByValues(CandidateFilter.LOCATION, location.id);
  this.candidatesHttpParams.emit(filtersToEmit);
}

Here where I add the url:

candidate.service.ts

get(page: number, httpParams: FilterParams): Observable<Candidate[]> {
  let params = new HttpParams().set('page', page.toString());

  //My main thought is to rewrite this forEach not for 'key', but for 'httpParams[key]'. Not sure

  Object.keys(httpParams).forEach(key =>
  params = params.append(key, httpParams[key])); //key = locationIds, httpParams[key] = [1,2]
  return this.http.get<Candidate[]>(this.url, { params });
}

And where actually get Candidates

import-page.ts

 private getCandidates(page: number) {
this.candidateViewService.get(page, this.params) 

//this.params = {key: Array(2)} // [1, 2] 

  .subscribe(
    (candidates: CandidateView[]) => this.candidates = candidates,
    error => this.logger.error(error.message));
    console.log('this Params',this.params)
}

Hope my question is clear. Would be really grateful for any help!

Hello, I don't get what's your problem, the url you want is for a get call or to do a navigation to https://localhost:8080/api/records?page=0&locationIds=1&locationIds=2 ? It's for a get call you can create your url string as you want by appending to your URL all your params. — Nico
– Nico, Commented May 29, 2020 at 9:18
Nevermind after rereading the question it's for a get call.So the main idea is passing the params in your url and not in the params option. I will provide asap an illustration of my saying — Nico
– Nico, Commented May 29, 2020 at 9:26
@Nico Hi, the url is for filter items, when I check some filter its id pushed to this.filterParams array which goes to file candidate.service.ts. In this service ForEach works for key and return url like this .../records?page=0&locationIds=1,2&otherKey=2,5 and then in import-page.ts I call this get method to get my url. But need to get url like this .../records?page=0&locationIds=1&locationIds=2&otherKey=2.. — Carolina
– Carolina, Commented May 29, 2020 at 9:30

David · Accepted Answer · 2020-05-29 10:46:00Z

1

Here is how you can do it.

If you want to pass multiple values from an array for a given key (say locationId), you need to repeat params.append(key, v), for each value v of your array ([1,2])

get(page: number, filterParams: any): Observable<Candidates[]> {
    let params = new HttpParams().set('page', page.toString());

    Object.keys(filterParams).forEach(key=>
    {
      let val: any = filterParams[key];

      if(Array.isArray(val)) //For arrays, repeatedly add values
      {
          for(let v of val)
          {
            params = params.append(key, v);
          }
      }
      else
      {
        params = params.append(key, val); //add value as is
      }

   });
 return this.http.get<any[]>(this.url, { params  });
}

Stackblitz demo (check network tab to see request)

edited May 29, 2020 at 10:46

answered May 29, 2020 at 10:24

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nico · Accepted Answer · 2020-05-29 09:56:23Z

0

Check this rough example in JS, I hope it will lead you to what you need.

var page = 0;
var locationIds = [1, 2];
function getCall(baseUrl, page, locationIds) {

  let str = baseUrl + "?page" + page + "&"; // adding the first page params.
  locationIds.forEach((element, index) => {
    str += "locationsIds="+element;
    if (index < locationIds.length - 1) { //check if it's the last item or not
      str += "&";
    }
  });
  // do your http call (this.http refers to HttpClient)
    // this.http.get(str).subscribe((data) => {
  //   your code.
  // })
  return str; // only for the example purpose to log the str created;
};
console.log(getCall("http://localhost:8080/records", page, locationIds));

And if you check the dev console in your browser after uncommenting the http get call in your angular app you will have in the network tab your request :

I'm sure it's not the unique way achieving this with angular. But it's the first way poping in my mind. Feel free to ask some question for your integration in your app.

answered May 29, 2020 at 9:56

Nico

5282 silver badges11 bronze badges

1 Comment

Carolina Over a year ago

Thank a lot for that idea and your time! I will keep this way of solution in mind :)

Collectives™ on Stack Overflow

Array in URL parameter (Angular)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related