Angular 14 Http Get Request Pass Object As Param

Contents hide

1 Angular 14 Http get request pass Object as param

Problem Description:

I need to pass this object via http.get to my backend:

export class InboxParameter 
{
   userId: string = "";
   inboxFolderId: number = 0;
}

and here is my InboxItem Class:

import { SafeResourceUrl } from "@angular/platform-browser";

export class InboxItem {
  letterReceiverId: number = 0;
  senderFullName: string = "";
  subject: string = "";
  isRead: string = "";
  keyWords: string = "";
  messages: number = 0;
  rulesOK: string = "";
  attachmentCount: number = 0;
  starred: boolean = false;
  faceImage: string = "";
  image: SafeResourceUrl = "";
}

and this is how I send the get request inside my angular service:

getInbox(inboxParameter: InboxParameter): Observable<InboxItem[]> {    
    let url = `${this.baseUrl}/${ApiPaths.Automation}/GetInbox`;
    return this.http.get<InboxItem[]>(url, inboxParameter);
  }

this is my backend method:

  public ActionResult<List<BLL.DTO.AutomationDTO.InboxItem>> GetInbox(BLL.DTO.AutomationDTO.InboxParameter Parameter)
{...}

but this line return this.http.get<InboxItem[]>(url, inboxParameter); gives me the following error:

Type ‘Observable’ is not assignable to type ‘Observable<InboxItem[]>’.
Type ‘ArrayBuffer’ is missing the following properties from type ‘InboxItem[]’: length, pop, push, concat, and 28 more

Solution – 1

GET doesn’t support body, so you must use the query string to pass your object to the backend.

1- Define a method that converts your input to an HttpParams object

 public ToHttpParams(request: any): HttpParams {
    let httpParams = new HttpParams();
    Object.keys(request).forEach(function (key) {
      httpParams = httpParams.append(key, request[key]);
    });
    return httpParams;
  }

2- Call the backend in this way:

return this.http.get<InboxItem[]>(url, { params: ToHttpParams(inboxParameter)});

Rate this post