Массив в параметре URL (Angular) - PullRequest
Новая
       8

Массив в параметре URL (Angular)

0 голосов
/ 29 мая 2020

У меня есть фильтр с флажками, где после проверки добавлен параметр к URL-адресу 

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

Но хочу быть таким 

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

Как я понял, это потому, что я передать параметр Array to URL, и моя основная мысль - переписать этот forEach не для 'key', а для 'httpParams[key]' в файле candidate.service.ts (не уверен), но не знаю, как это сделать право. Вот мой код:

filter.service.ts. (В этом сервисе фильтр возвращается как массив) 

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);
}

Я использую этот сервис в другом файле, когда я устанавливаю некоторые флажки, этот идентификатор добавляется в массив

кандидата-filter.ts 

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

Вот где я добавляю url:

кандидата.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 });
}

И где собственно получить Кандидатов

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)
}

Надеюсь, мой вопрос ясен. Буду очень признателен за любую помощь!

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Вот как это можно сделать.

Если вы хотите передать несколько значений из массива для данного ключа (например, locationId), вам нужно повторить params.append(key, v) для каждого значения v вашего массива ([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 (проверьте вкладку сети, чтобы увидеть запрос)

0 голосов
/ 29 мая 2020

Посмотрите этот примерный пример в JS, я надеюсь, что он приведет вас к тому, что вам нужно. 

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));

И если вы проверите консоль разработчика в своем браузере после раскомментирования вызова http get в вашем приложении angular, у вас будет на вкладке сети ваш запрос:

enter image description here

Я уверен, что это не единственный способ добиться этого с помощью angular. Но это первый способ приходит мне в голову. Не стесняйтесь задать вопрос для интеграции в ваше приложение.

...