CODEWITHSUNDEEP
arraysangularhttp-parameters
Steve020
Steve020

Reputation: 134

Add an Angular HttpParam for each value in an array

I have a Http Request from angular that has multiple parameters. The one parameter type that the api takes is an Array of integers. So that section of the URl has the similar format to this : &Array=a&Array=b&Array=c

Before i realized that i was just passing in the whole integer array as on of the parameters.

Here is what i thought would work but isn't :

    getLocationByBoundingBoxSearch(upperLeftLatitude: any, upperLeftLongitude: any, bottomRightLatitude: any, bottomRightLongitude: any,
                               maxResults: any, LocationType: any, requestUser: any, userClientIPAddress: any,
                               systemSourceCodeId: any, cesEntityServiceTypesToInclude: any, cesEntityServiceTypesToExclude?: any, 
                               entityTypes?: any, competitorTypes?: any){

     let httpParams = new HttpParams()
        .set("upperLeftLatitude", upperLeftLatitude)
        .set("upperLeftLongitude", upperLeftLongitude)
        .set("bottomRightLatitude", bottomRightLatitude)
        .set("bottomRightLongitude", bottomRightLongitude)
        .set("maxResults", maxResults)
        .set("LocationType", LocationType)
        .set("requestUser", requestUser)
        .set("userClientIPAddress", userClientIPAddress)
        .set("systemSourceCodeId", systemSourceCodeId);

    console.log("length of cesEntityServiceTypesToInclude : " + cesEntityServiceTypesToInclude.length);
    if(cesEntityServiceTypesToInclude.length > 1)
    {

        cesEntityServiceTypesToInclude.forEach(cesToInclude => {
            httpParams.append("cesEntityServiceTypesToInclude", cesToInclude);
        });
        
        var cesParamUrl = (this.mappingServiceApiUrl + "/LocationByBoundingBoxSearch", {params: httpParams});
        console.log("cesToINCLUDE param url  : " + JSON.stringify(cesParamUrl));
    }

Notice

that I am trying to dynamically go through the values of the arrayType "cesEntityServiceTypesToInclude" and try to set a new parameter for each.

However in the Console log the full request with the params - it doesn't show any of the cesEntityServiceTypesToInclude parameters.

I know that set can override values and since the same key name needs to be used multiple times i used append and not set

Upvotes: 0

Views: 250

Answers (2)

Steve020
Steve020

Reputation: 134

const paramsObj = {
      "upperLeftLatitude": locationByBoundingBoxSearchRequest.upperLeftLatitude,
      "upperLeftLongitude": locationByBoundingBoxSearchRequest.upperLeftLongitude,
      "bottomRightLatitude": locationByBoundingBoxSearchRequest.bottomRightLatitude,
      "bottomRightLongitude": locationByBoundingBoxSearchRequest.bottomRightLongitude,
      "maxResults": locationByBoundingBoxSearchRequest.maxResults,
      "LocationType": locationByBoundingBoxSearchRequest.locationType,
      "requestUser": locationByBoundingBoxSearchRequest.requestUser,
      "userClientIPAddress": locationByBoundingBoxSearchRequest.userClientIPAddress,
      "systemSourceCodeId": locationByBoundingBoxSearchRequest.systemSourceCodeId,
      "cesServiceTypeToInclude": locationByBoundingBoxSearchRequest.cesServiceTypeToInclude,
      "cesServiceTypeToExclude": locationByBoundingBoxSearchRequest.cesServiceTypeToExclude,
      "entityTypes": locationByBoundingBoxSearchRequest.entityTypes,
      "competitorTypes": locationByBoundingBoxSearchRequest.competitorTypes
    }
     return this.http.get(this.mappingServiceApiUrl + "/LocationByBoundingBoxSearch", {params: paramsObj})
     .pipe(map((res => res)));

The solution i was able to come with was to make a generic object. Where i was actually able to pass in the array types as a parameter that used the &cesServiceTypeToInclude=a&cesServiceTypeToInclude=b format that i was looking for.

Upvotes: 0

angularQuestions
angularQuestions

Reputation: 118

If think what you are missing is to reassign:

httpParams = httpParams.append("cesEntityServiceTypesToInclude", cesToInclude);

Upvotes: 1

Related Questions