lundi 20 mai 2019

How to I get data from working Web API in angular?

Okay so I'm trying to get data from Web API that I made in angular. Web API is working I tested it using Postman and Postman gets the data from Web API just fine here is the screenshot of Postman getting the data from Web API " http://prntscr.com/nr18ct ". That makes me certain that it is a problem with angular. And I'm sorry if I don't make sense or if the rest of the question / post is f**ed up first time asking a question here.

I did follow angular tutorial on Angular.io I really don't know what it could cause it, just to say it worked perfectly fine before I did the last part of the tutorial, that is trying to get data from Web API. My first thought was maybe I f**ed up something in PagedVehicleMake class in angular (typescript class) or VehicleMake class also in angular also typescript class

Web API part: As you saw in the screen shot I sent before Web API sends that type of data.

    public class PagedResult<T> : IPagedResult<T> where T : class
{
        public int PageNumber { get; set; }
        public int PageSize { get; set; }
        public int TotalNumberOfPages { get; set; }
        public IEnumerable<T> Results { get; set; }
}

and IEnumrable Results in this case is IEnumrable Results and VehicleMakeVM is:

    public class VehicleMakeVM
{
        public int Id { get; set; }
        public string Name { get; set; }
        public string Abrv { get; set; }
}

Now for Angular part:

export class PagedVehicleMake{
    Results : VehicleMake[];
    TotalNumberOfPages : number;
    PageSize : number;
    PageNumber : number;
}

I tried to arrange PagedVehicleMake class the same way data is sent to Postman showed in a screenshot I sent. I thought maybe it had something to do with that.

export class VehicleMake {
    Id : number;
    Name : string;
    Abrv : string;
}

and here is the VehicleMakeService class in angular:

export class VehicleMakeService {

  constructor(private http: HttpClient, private messageService : MessageService) { }
  private vehiclemakesUrl = "http://localhost:53282/api/VehicleMake"
  /**GET vehiclemakes from the server */
  getVehicleMakes() : Observable<PagedVehicleMake>{
    this.messageService.add("VehicleMakeService : fetched VehicleMakes")
    return this.http.get<PagedVehicleMake>(this.vehiclemakesUrl).pipe(
      catchError(this.handleError<PagedVehicleMake>("getVehicleMakes", []))
      );
  }
    /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
    /** Log a VehicleMakeService message with the MessageService */
    private log(message: string) {
      this.messageService.add(`VehicleMakeService: ${message}`);
    }

I expected it to just get the data from WebAPI but it somehow isn't capable of getting the data.




Aucun commentaire:

Enregistrer un commentaire