Search code examples
angularrxjsangular6angular-httpclientrxjs6

Angular-HttpClient: Map object to array properties


I am calling an API which returns me a JSON Object. I need to map this object to an array.

Below is my code but after API call neither am getting any response nor any error.

export class Features {
  MenuId: number;
  MenuName: string;
  Description: string;
  RoutePath: string;
}

featureList: Features[] = [];
 constructor(private http: HttpClient)

 getFeatureListByLoggedInUser(userID: number) { debugger;       
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
      .pipe(
      map(
        (data: any[]) => {
        debugger;
        this.featureList = data;
        //return true;
      }), catchError(error => {
        debugger;
        return throwError('Something went wrong!')
      })
    );
 }

Also tried below code but its giving me an error :

Type object is not assignable to type 'any[]'

 featureList: Array<any> = [];

 getFeatureListByLoggedInUser(userID: number) { debugger;  
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)
      .subscribe(
        data => {
          debugger;
          this.featureList = data;            
      });
 }

Edit :

 return this.http.get<Array<Features>>(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)   
      .subscribe(
        data => {
          debugger;
          //this.featureList = data;  
      });

Solution

  • You are not returning from.map(). You should return this.featureList from service

    getFeatureListByLoggedInUser(userID: number) { debugger;       
        return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
          .pipe(
          map(
            (data: any[]) => {
            debugger;
           return this.featureList = data;
          }), catchError(error => {
            debugger;
            return throwError('Something went wrong!')
          })
        );
     }
    

    EDIT

    Also map seems unnecessary in your code, because you are not manipulating anything inside over there. You may take off that and keep catchError to handle errors.

    getFeatureListByLoggedInUser(userID: number) {       
        return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
          .pipe(
               catchError(error => {
                return throwError('Something went wrong!')
          })
        );
     }
    

    And in your component

    this.service.getFeatureListByLoggedInUser(id)
          .subscribe(data => { this.featureList = data })