How to get http headers from backend while passing http parameters to it in ASP.NET Core and Angular?

Question

I am using Angular 15 and ASP.NET Core 5. I get the paged items from backend when the pageSize and pageIndex are passed as parameters to it.

The action method that receives pageSize and pageIndex parameters then sends the paged items as well as totalCount to frontend.

Here's that code:

[HttpGet("getPagedCommodities")]
public async Task<IActionResult> GetPagedCommodities([FromQuery] PagingParameters pagingParameters)
{
    try
    { 
        var commodities = await _repository.Commodity.GetAllCommoditiesAsync();
        var totalCount = commodities.Count();
                
        var pagedCommodities = await _repository.Commodity.GetPagedCommoditiesAsync(pagingParameters);
                
        Response.Headers.Add("X-Pagination", JsonConvert.SerializeObject(totalCount));                

        return Ok(pagedCommodities);
    }
    catch
    {
        return StatusCode(500, "Internal server error");
    }
}

In the frontend, this is the method that gets the paged items:

getPagedCommodities(pageSize: number, pageNumber: number): Observable<CommodityForList[]> {
    let params: HttpParams = new HttpParams();
    params = params.append('pageSize', pageSize);
    params = params.append('pageNumber', pageNumber);
    
    let httpOptions = {
      params: params
    };
    return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/', httpOptions);
      
  }

How can I read the totalCount http header parameter sent from server?

Thank you for your help.

kellermat · Accepted Answer · 2023-01-22 12:03:35Z

1

How to access the header parameters of an API-response

I now integrated your code into my own Angular/ .NET project and eventually figured out a code that works:

Backend: Startup.cs

I had to add X-Pagination to the CORS policy, otherwise it would always be undefined. Click here to read why this is needed.

services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("X-Pagination"); // I had to add this line
    });
});

Backend: Controller-Method

I had to change the input parameters from PagingParameters pagingParameters to [FromQuery] int pageSize, [FromQuery] int pageNumber:

[HttpGet("getPagedCommodities")]
public async Task<IActionResult> GetPagedCommodities([FromQuery] int pageSize, [FromQuery] int pageNumber)
{
    try
    { 
        var commodities = await _repository.Commodity.GetAllCommoditiesAsync();
        var totalCount = commodities.Count();
                
        var pagedCommodities = await _repository.Commodity.GetPagedCommoditiesAsync(pagingParameters);
                
        Response.Headers.Add("X-Pagination", JsonConvert.SerializeObject(totalCount));                

        return Ok(pagedCommodities);
    }
    catch
    {
        return StatusCode(500, "Internal server error");
    }
}

Frontend: Service-Method

By adding observe: 'response', access to HttpResponse<YourJsonObject> will be granted. You can then get your header-values via response.headers.get("Header-Key").

I also had to change the way I assemble the httpOptions (which is the second parameter of this.http.get).

getPagedCommodities(pageSize: number, pageNumber: number): Observable<{commodities: CommodityForList[]; totalCount: number}> {

    const params: HttpParams = new HttpParams()
                                .append('pageSize', pageSize)
                                .append('pageNumber', pageNumber);

    const url = `${this.baseUrl}/getPagedCommodities/`;

    return this.http.get<CommodityForList[]>(url, { observe: 'response', params })
        .pipe(
            map(response => {

            // Access 'total count' in header:
            const totalCount = response?.headers?.get('X-Pagination');
            const parsedTotalCount = +(totalCount ?? 0);

            return { commodities: response?.body ?? [],
                     totalCount: parsedTotalCount };
            })
        );
}

Eventually I was able to access the returned values as follows:

this.getPagedCommodities(0, 1).subscribe(
    res => {
        console.log('Commodities-Array:', res.commodities);
        console.log('Total count:', res.totalCount);
    }
);

edited Jan 22, 2023 at 12:03

answered Jan 21, 2023 at 22:15

kellermat

4,8515 gold badges12 silver badges27 bronze badges

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

7 Comments

R. Nourmandi Over a year ago

I want to get pagedCommodities as observable in the Listcomponent : this.commoditiesForList$ = this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex); where, commoditiesForList$!: Observable<CommodityForList[]>; and to get the totalCount as: this.commoditiesForList$.subscribe(res => this.length = res.totalCount). is it possible? and how can I solve this problem?

R. Nourmandi Over a year ago

I tried your suggestion in the ListComponent as follows: this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex).subscribe(res =>{ const totalCount = res?.headers?.get('X-Pagination'); // totalCount = undefined; const ptotal = +(totalCount ?? 0) // ptotal = 0; const cts = res?.body ?? []; // cts = []; As you can see, the results are not satisfactory!

R. Nourmandi Over a year ago

Also, I couldn't use the map in the service get method, because I was prompted with an error. So I used its body directly in the ListComponent.

kellermat Over a year ago

I integrated your code into my own Angular / .Net project and I was eventually able to reproduce your issues and solve them. Can you try my new suggestion?

kellermat Over a year ago

About your first question: What exactly is your need there? You would like to be able to subscribe to totalCount and CommodityForList[] separately?

|

Get Off My Lawn · Accepted Answer · 2023-01-21 22:17:28Z

0

You can pass the setting observe: 'response' to the http get to observe the whole response and not just the body.

this.http.get(myUrl, {
  observe: 'response',
  params
}).subscribe(response => console.log(response))

So now instead of getting the body, you now get the whole response where headers and body is a property of that response:

{
  headers: {
    totalCount: 123
  },
  status: 200,
  body: {}
}

edited Jan 21, 2023 at 22:17

answered Jan 21, 2023 at 22:11

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

Collectives™ on Stack Overflow

How to get http headers from backend while passing http parameters to it in ASP.NET Core and Angular?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related