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

Angular - A simple way to conceal a specific row in a mat-table using Angular

Navigating Routes with Router in Angular 7: A Step-by-Step Guide

Ways to activate subscriptions in type-graphql?

Angular 2 component downgrade issue: What causes the error when constructor parameters are involved? (SystemJS) Unable to resolve all parameters for (?)

Creating dynamic Angular Material 2 MatMenu instances with ease

Angular2 - Issue with calling toPromise() method on this.http.get() function, as it is not recognized

Heroku deployment of Angular application encounters launching issue

Aliases for NPM packages and TypeScript declaration files

The React Fabric TextField feature switches to a read-only mode once the value property is included

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

The documentation for Angular guards is riddled with vague and obfuscating statements

Create a fresh type by dynamically adjusting/filtering its attributes

Ways to arrange objects to fill up space in a specific sequence

Execute a Typescript function where parameters are passed to another function

Firebase Integrations: How to Handle Errors in External API Calls within Firebase Functions

Having trouble deploying my Scully (Angular) application on AWS due to a 502 Bad Gateway error

Rx.js struggles to access historical values

Having trouble grasping the concept of Interfaces and dealing with FormGroup problems in Angular?

Error message stating: "The 'MktoForms2' property is not recognized within the scope of 'Window & typeof globalThis'."

There appears to be an issue with the dynamic functionality of RouterLink in Angular 6