Angular - map to returnedEntity in an API response

Question

I'm using Angular 8.2 and calling a .NET Core 3.1 API and I'm able to get the call to work and return the data that I need, but the syntax I ended up using looks like it could be simplified, but so far no alternatives that I've tried seem to work.

I'm calling the API this way:

getCatsApi(): Observable<any[] | DataServiceError> {        
    console.log("API");       
    let mcats = this._http.get<any[]>( Settings.apiRoot + 'api/Cat/GetCats')
        .pipe(
            catchError(err => this.handleHttpError(err))
        )        
    console.log("Get Cats from API");
    console.log(mcats);
    return mcats;
}

This returns a response structure that looks like this:

The data I want is in the "returnedEntity" property, just below the "responseErrors" property.

I'm able to get at this data in what seems like a messy way:

getCats(){
this._dataService.getCatsApi().subscribe(data => {
  for(let j = 0; j < data['returnedEntity']['catList'].length; j++) {
    console.log(data['returnedEntity']['catList'][j]);
    this.catsObj.push(data['returnedEntity']['catList'][j]);
  }
});

}

This does work and I receive the data that I need. But it seems like there must be a better way to get the returnedEntity back without explicitly referring to it with array strings. I am using <any[]> in the original HTTP call, but if I change that to the <Category[]> interface that I created it doesn't seem to make a difference. I'm guessing that I need to use some form of the rxjs .map() function, but so far I haven't found a way to make that work. This makes me wonder if something else is wrong? Any thoughts would be greatly appreciated! Thank you!

AlleXyS · Accepted Answer · 2020-06-17 14:16:57Z

1

due of data['returnedEntity']['catList'] seems that your returnedEntity have an attribute named 'cadList' with an array type.

your data['returnedEntity'] must have a T type,

then you can write something as :

this.catsObj = data['returnedEntity']

also, share some backend code please

answered Jun 17, 2020 at 14:16

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barremian · Accepted Answer · 2020-06-17 14:37:56Z

You could either edit the backend to return the catList property directly or map the response using RxJS map before subscribing to it. The loop you're using seems redundant.

If the object signature of the data from backend matches your front-end type Category, you could also replace any[] with Category[].

Service

getCatsApi(): Observable<Category[] | DataServiceError> {        
  return this._http.get( Settings.apiRoot + 'api/Cat/GetCats').pipe(
    map(response => response['returnedEntity']['catList']),       // <-- map the reponse here to return the `catList` array
    catchError(err => this.handleHttpError(err))
  );
}

Controller

getCats(){
  this._dataService.getCatsApi().subscribe(
    data => { this.catsObj = data },
    error => { }
  );
}

^{Also the name catsObj looks misleading given it's an array.}

Collectives™ on Stack Overflow

Angular - map to returnedEntity in an API response

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related