Unable to pass a parameter through an Angular http.get request

Question

Unable to pass a parameter through an Angular http.get request

I've encountered an issue where I am attempting to pass the page number and page size values to a web API, but for some reason, no parameters are being passed. I have thoroughly debugged the application in VS Code, and verified that the pagingModel object contains both pageSize and pageNumber with valid values. However, when checking the request URL in Chrome dev tools, there are no parameters present. Do you see any potential errors in my code?

getTasks(pagingModel: IPagingModel): Promise<TaskList> {
    const url = this.taskUrl;
    const params = new URLSearchParams();
    let option: RequestOptions;
     // tslint:disable-next-line:forin
     for (const key in pagingModel) {
      params.set(key, pagingModel[key]);
     }

    option = new RequestOptions( {search: params, params: params});

    return this.http.get(url, option)
               .toPromise()
               .then(response => response.json() as TaskList)
               .catch(this.handleError);
  }

https://i.stack.imgur.com/IgD1y.png

angular typescript

Answer 1

Answer №1

This method may not be the most optimal solution, but it does get the job done.

const fetchUrl = this.taskUrl;
fetchUrl += '?';

Object.keys(dataModel).forEach(item => {
        fetchUrl += `${encodeURIComponent(item)}=${encodeURIComponent(dataModel[item])}&`;
    });

return this.http.get(fetchUrl)
           .toPromise()
           .then(result => result.json() as TaskList)
           .catch(this.handleError);

}

Answer 2

This method may not be the most optimal solution, but it does get the job done.

const fetchUrl = this.taskUrl;
fetchUrl += '?';

Object.keys(dataModel).forEach(item => {
        fetchUrl += `${encodeURIComponent(item)}=${encodeURIComponent(dataModel[item])}&`;
    });

return this.http.get(fetchUrl)
           .toPromise()
           .then(result => result.json() as TaskList)
           .catch(this.handleError);

}

Answer 3

Answer №2

If you want to implement something similar using the latest HttpClientModule in Angular v4, consider the following approach:

import {HttpParams} from "@angular/common/http";
const params = new HttpParams()
    .set('pagenumber', '<your para>')
    .set('pagesize', "<your para>");

this.http
    .get("<requrl>", {params}) // Remember, with HttpClientModule, you don't need to use res.json() as it has .json() by default

We are constructing the HTTPParams object through chaining set() methods. Since HTTPParams is immutable, its API methods do not alter the existing object but instead return a new HttpParams object with the updated value properties.

The following code snippet will not achieve the desired functionality:

params.set('pagenumber', '<para>')
params.set('pagesize', "<para>");

Answer 4

If you want to implement something similar using the latest HttpClientModule in Angular v4, consider the following approach:

import {HttpParams} from "@angular/common/http";
const params = new HttpParams()
    .set('pagenumber', '<your para>')
    .set('pagesize', "<your para>");

this.http
    .get("<requrl>", {params}) // Remember, with HttpClientModule, you don't need to use res.json() as it has .json() by default

We are constructing the HTTPParams object through chaining set() methods. Since HTTPParams is immutable, its API methods do not alter the existing object but instead return a new HttpParams object with the updated value properties.

The following code snippet will not achieve the desired functionality:

params.set('pagenumber', '<para>')
params.set('pagesize', "<para>");

Answer 5

Answer №3

Everything was running smoothly with my code until I realized that I needed to import URLSearchParams.

import { Headers, Http, RequestOptions, RequestOptionsArgs, URLSearchParams } from '@angular/http';

Prior to this realization, I had overlooked importing it and surprisingly, Visual Studio Code did not flag any errors for me.

Answer 6

Everything was running smoothly with my code until I realized that I needed to import URLSearchParams.

import { Headers, Http, RequestOptions, RequestOptionsArgs, URLSearchParams } from '@angular/http';

Prior to this realization, I had overlooked importing it and surprisingly, Visual Studio Code did not flag any errors for me.

Unable to pass a parameter through an Angular http.get request

Answer №1

Answer №2

Answer №3

Similar questions

The constant increase in page header number leading to minor interruptions during page scrolling

Using webpack to bundle node_modules into your application

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

Why use rxjs observables if they don't respond to updates?

Setting a global property within the complete method of an ngrx Angular subscriber is a helpful technique to ensure that

Refreshing a page in Angular 4/5 using TypeScript

What could be causing this peculiar behavior in my React/TypeScript/MUI Dialog?

Tips on optimizing NextJS for proper integration with fetch requests and headers functionality

Is there a way to include values in the body of an HTTP GET request using Angular?

Obtaining the correct information from an array using Ionic's Angular framework

What is the syntax for creating a zip function in TypeScript?

Enhance your viewing experience by zooming in and out with ng2-pdf-viewer

Utilizing Angular 2 for Integration of Google Calendar API

Issue with material table not showing data

Is it possible to dynamically close the parent modal based on input from the child component?

Implementing Angular WebSocket to showcase elements in a sequential manner during chat

Sharing screen content in Firefox using Angular 6

Is it possible to modify the variables in a SCSS file within an Angular 2 project?

Having trouble resolving the '@angular/material/typings/' error?

Is your Angular 2 routing failing to work properly after a page refresh or reload when using gulp?