'Angular http response need help being able to iterate through the response on subscribe

I have a component that makes a call to service method which makes an http request. I am unable to iterate through the returned response.

Component

this.mappingService
  .getLocationByBoundingBoxSearch(
    upperLeftLatitude,
    upperLeftLongitude,
    bottomRightLatitude,
    bottomRightLongitude,
    maxResults,
    locationType,
    requestUser,
    userClientIPAddress,
    systemSourceCodeId,
    cesServiceTypeToInclude,
    cesServiceTypeToExclude,
    entityTypes,
    competitorTypes
  )
  .subscribe({
    next: (centersWithStorageData) => {
      this.centersWithStorage = centersWithStorageData;

      console.log(centersWithStorageData);
      console.log(JSON.stringify(centersWithStorageData.));

      this.centersWithStorage.forEach(centerStorage => {
        let ceterStorageIcon : PinIcon = {
          Location: centerStorage.Location,
          Unicode: '\uf005',
          fontName: 'FontAwesome',
          fontSizePx: 30,
          color: '#e74a3b'
          };
          this.createFontPushpin(ceterStorageIcon)
      });

this.centersWithStorage is of type any.

MappingService

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

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

Block that may need to be altered

     return this.http.get(this.mappingServiceApiUrl + "/LocationByBoundingBoxSearch", {params: paramsObj})
    .pipe(map((res => res)));

The res is an Object. I can console log the response an it shows and array of objects so i don't know why i can't iterate it from the ts of the component. I don't want to have to make a custom strongly typed object to return as. Any suggestions ?

arraysangularobjectobservablehttprequest


Solution 1:[1]

I realized intellisense on visual studio code was not working properly when typing out this.centersWithStorage.

  this.mappingService
  .getLocationByBoundingBoxSearch(
    upperLeftLatitude,
    upperLeftLongitude,
    bottomRightLatitude,
    bottomRightLongitude,
    maxResults,
    locationType,
    requestUser,
    userClientIPAddress,
    systemSourceCodeId,
    cesServiceTypeToInclude,
    cesServiceTypeToExclude,
    entityTypes,
    competitorTypes
  )
  .subscribe({
    next: (centersWithStorageData) => {
      this.centersWithStorage = centersWithStorageData;
      this.centersWithStorage.result.cesEntity.forEach(centerStorage => {

I was able to use the full dot accessor notation to the properties of the object, and now it works :) i didn't try it before because the properties weren't showing up while typing.

this.centersWithStorage.result.cesEntity was the fix.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve020

Related Questions