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

I believe i found why this isn't working. Check out the answer from https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3 — Steve020, Mar 24 '22 at 17:01

score 1 · Answer 1 · answered Mar 24 '22 at 14:10

1

If think what you are missing is to reassign:

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

answered Mar 24 '22 at 14:10

angularQuestions

108
7

what do you mean reassign. httpParams = httpParams.append("cesEntityServiceTypesToInclude", cesToInclude); Is inside a loop so for each value in the array a new parameter for each should be created. – Steve020 Mar 24 '22 at 16:38
A new instance is returned and you have to assign it. Please read this post for more information: https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3 – angularQuestions Mar 28 '22 at 06:24
Yes after more research i found that out. So i wasn't able to do this the original direction i was going. However I came up with a different solution to get what i needed done. – Steve020 Mar 28 '22 at 15:17

score 0 · Answer 2 · answered Mar 28 '22 at 15:18

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.

Add an Angular HttpParam for each value in an array

2 Answers2