Dynamic URL parameters based on number of id's in array Angular 2

Question

I have a array named selectedItems that is populated from a multi-select dropdown button. SelectedItems could looks like this if all options were selected:

this.selectedItems: SearchItem[]= [
  {"id":"abee232","itemName":"Attractions"},
  {"id":"b6b1a23","itemName":"Artists"},
  {"id":"08a58c8","itemName":"Performing Arts"},
  {"id":"444d047","itemName":"Sports"}
];

I need to add the id values, however many have been selected, as parameters in a http GET request. Right now my logic looks like this.

  private addRequestOptions(params: SearchItem[]): RequestOptions {
    let options: RequestOptions = new RequestOptions();
      options.params = new URLSearchParams();
    if (params != null) params.forEach((p: SearchItem) => {
      options.params.append("&collectionId", p.id);
    })
    console.log(options)
    return options;
  }

  sortResults(){
        let options: RequestOptions = this.addRequestOptions(this.selectedItems);
        this.pendingCardsService.collectionUuidUrl = 'http://address/cards/topbrands?perPage=25', options;
        this.pendingCardsBrandCollection();
  }

With my SearchItem interface looking like this:

export interface SearchItem {
  id?: string;
  itemName?: string;
}

Right now this creates a requestOptions object that has the values in it as an array but my http requests do not show this in the query string parameters field within the network tab. It seems that the addRequestOptions() is working correctly but not being applied properly to the get request. The goal is to end up with a URL something like this:

'http://address/cards/topbrand?perpage=25&collectionId=idValue&collectionId=idValue&collectionId=idValue'

I am stuck how to accomplish this. Any help/tips/suggestions would be much appreciated.

UPDATE w/final code My issue was with me having hard coded in 'http://address/cards/topbrands?perPage=25' ?perPage=25 was being read as params (rightfully so) and therefore the addition of the ids were not being appended since params were already present. My final code ended up looking like this that got it working properly:

  fetchPendingCardsBrandCollection(ids: SearchItem[], pageSize = '25'):Observable<Card[]> {
    const params = new URLSearchParams();
    params.set('perPage', pageSize);
    ids.forEach(id => params.append('collectionId', id.id));
    return this.http.get(this.collectionUuidUrl, {params: params})
      .map(this.extractData)
  }

With my function calling this http request function passing SearchItems as a parameter. Big thanks for @Praveen M for the assistance and @Jota.Toledo for the solution!

Jota.Toledo · Accepted Answer · 2017-07-24 21:29:42Z

1

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';

export interface SomeInterface {
   // Define the properties of the JSON object sent as response from the backend
}

@Injectable()
export class SomeService {
   constructor(private _http: Http){}

   queryElements(ids: string[] = [], pageSize = 25): Observable<SomeInterface>{
      const params = new URLSearchParams();
      params.set('perPage', pageSize); // using set: replace the existing value of the query parameter "perPage" if exist.
      ids.forEach(id => params.append('collectionId', id)); // using append: allows multiple values for the query parameter "collectionId" 
      return 
       this._http.get("http://address/cards/topbrand",{params: params})
         .map(r => r.json())
         .catch(//handle error);
   }
}

edited Jul 24, 2017 at 21:29

answered Jul 24, 2017 at 21:10

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

Comments

Prav · Accepted Answer · 2017-07-25 21:26:18Z

-1

Update the existing array of data by giving it a type so there is less wiggle room for error when dealing with the array.

// Add the class to a ts file
export class Args {
 id: string;
 itemName: strngs;
}

dropdownList: Args[] = [];

// Declare the selectedItems is a type of Args class
selectedItems: Args[] = [];


this.dropdownList = [
  {id:"abee232b6f3b06c3da1955fb270ced28", itemName:"Attractions"},
  {id:"b6b1a23b6a0ad3ab467284ca92bc7d59", itemName:"Artists"},
  {id:"08a58c804fa4eb462ad4e690a51864f6", itemName:"Performing Arts"},
  {id:"444d0472d7d94f569da6fd7a5608faba", itemName:"Sports"}
];

// Now they are actual key value pair
this.selectedItems = [
  {id:"abee232",itemName:"Attractions"},
  {id:"b6b1a23",itemName:"Artists"},
  {id:"08a58c8",itemName:"Performing Arts"},
  {id:"444d047",itemName:"Sports"}
];

//CSV Format

private addRequestOptions(params: Args[]): RequestOptions {
  let options: RequestOptions = new RequestOptions();
  let list: string = "";
  options.params = new URLSearchParams();
  if (params != null) params.forEach((p: Args) => {
    list + p.id + ",";
  });
  options.params.set("collectionId", list);
  console.log(options);
  return options;
}

// Array of parameters format

private addRequestOptions(params: Args[]): RequestOptions {
  let options: RequestOptions = new RequestOptions();
  let list: string = "";
  options.params = new URLSearchParams();
  if (params != null) params.forEach((p: Args) => {
    options.params.append("collectionId", p.id);
  });
  console.log(options);
  return options;
}

This will create a RequestOptions for the paramenters you passed as agrs to it and you can plug it straight in the the Get method.

this.http.get(url, this.addRequestOptions(this.selectedItems))
  .map((res: any) => res.json() as any)
  .catch((err: Response) Observable.throw(console.log(err)));

import {Http, RequestOptions, URLSearchParams} from "@angular/http";
import "rxjs";
import {Observable} from "rxjs/Observable";

UPDATE Now you should be able to pass the selectedItems variable in as the addRequestOptions argument and it will produce url parameres for the all the ids.

This post shows few ways of you could pass the values as Array of parameters

edited Jul 25, 2017 at 21:26

answered Jul 24, 2017 at 21:17

Prav

2,9132 gold badges24 silver badges34 bronze badges

13 Comments

Prav Over a year ago

That should produce something like http://address/cards/topbrand?perpage=25collectionId=id1,id2,id2,id4.....

Jota.Toledo Over a year ago

A lot of back end frameworks have built in support to parse key=value1&key=value2 into an array with no extra code. By using the coma approach, you need to create a parser method.

Prav Over a year ago

@Jota.Toledo Thanks for pointing that out, I wasn't sure if I should use that method. I have updated the code with both options now

Jota.Toledo Over a year ago

You still have in your answer "at least its not best practice". Where did you got that from? And btw, stackoverflow.com/questions/42376972/… . Im pretty sure import "rxjs" either does nothing or does "way to much" ;)

Prav Over a year ago

I removed the best practice part and I added the rxjs if the user decided to use other functionalities of it other that Observable. Its up to the user to include it or not. I.E BehaviorSubject

|

Collectives™ on Stack Overflow

Dynamic URL parameters based on number of id's in array Angular 2

2 Answers 2

Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related