Add an Angular HttpParam for each value in an array

Question

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

Answer 1

If think what you are missing is to reassign:

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

Answer 2

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.