Angular HttpClient not recognizing hashtag

I'm trying to make a REST API call, but running into issues with the developerId parameter being sent incorrectly:

let developerId = "123#212";
let url = \`\${Constants.BASE_URL}\${marketId}/developers/\${developerId}\`;
return this.http.get(url);

The backend is only receiving 123 instead of 123#212

Here's what I've tried so far, without success:

  • Using encodeURIComponent 

    encodeURIComponent(${developerId})

  • Implementing a HttpInterceptor, following advice from this StackOverflow post

Interestingly, the REST API call works perfectly when using Postman, but not in an Angular environment

javascriptangulartypescripthttpclient

Answer №1

Instead of utilizing hashtags, consider using HttpParams to transmit this information. You can observe the same method being employed in the question you referenced.

For your post/get request, include the following:

this.http.get('URL', {
      params: new HttpParams()
        .set('param-a', 'value-1')
        .set('param-2', 5)
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to associate a click event with an angular2 template interpolation?

Can a click event be bound to an interpolation? Whenever I try to run the code below, I encounter the following ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at col ...

javascriptangular

How to access global variables in node.js modules?

I'm looking to move some functionality to a new file called helpers.js. Below is the code that I have put in this file. How can I access the app variable within my method so that I can retrieve the config element called Path? Helpers = { fs: requ ...

javascriptnode.jsexpress

transmit FormData containing two files and a text message to the controller

I have encountered an issue while trying to send a FormData object containing text fields, an image file, and a PDF file to an action in the controller. Despite my efforts, the form data is not being sent to the action. I have checked for errors through br ...

javascriptc#ajaxasp.net-coremultipartform-data

Implementing a Radial Cursor with a Custom Background Image in JavaScript

I am attempting to implement a radial cursor on a website that features a background image. Currently, I am facing two main issues: The radial cursor works in Chrome but not in Firefox. When using Firefox, I encounter a parsing error related to the "bac ...

javascriptjqueryhtmlcsscursor

Sorting an array of Material-UI's <TableRow> alphabetically using ReactJS and Material-UI. How to do it!

I am currently utilizing Material-UI's <Table> and <TableRow> components by rendering an array of <TableRow>s using the .map() method. Each <TableRow> contains a <TableRowColumn> representing a first name, for example: &l ...

javascriptarraysreactjsmaterial-ui

Numerous documents for route definitions

Typically, I usually have all my route definitions in a single file, such as app.routing.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@a ...

angularangular-routing

Exploring the Power of Observables in Angular 2: Chaining and

Hi there! I'm relatively new to Angular and still getting the hang of observables. While I'm pretty comfortable with promises, I'd like to dive deeper into using observables. Let me give you a quick rundown of what I've been working on ...

angularhttprxjsobservable

The Angular EventEmitter does not broadcast any modifications made to an array

Below is the code snippet: notes.service.ts private notes: Array<Note> = []; notesChanged = new EventEmitter<Note[]>(); getNotes() { this.getData(); console.log('getNotes()', this.notes); ...

angulartypescriptangular-event-emitterserver-communication

What methods are available to restrict the values of properties to specific keys within the current type?

I am looking to declare an interface in typescript that is extensible through an indexer, allowing for the dynamic association of additional functions. However, I also want sub properties within this interface that can refer back to those indexed functio ...

typescripttypescript-types

Stagnant variable value after onClick event

After exploring various solutions, none seem to quite fit my needs. I want to update the variable "currentIndex" when a user clicks on an image. Currently, the change occurs within the onClick function but does not affect the outside variable. I am unsur ...

javascriptreactjsonclickreturnvariable-assignment

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Experiencing difficulty in clearing the input field value, even after pressing backspace the value remains constant. One particular value persists in the input field. import * as React from "react"; import { Button, Form } from "react-boots ...

javascripthtmlreactjs

Maximizing the efficiency of this JavaScript code

Is there a way to optimize this code for better efficiency? I'm trying to enhance my coding skills and would appreciate some feedback on this particular section: $(function(){ $('#buscar').focus(function(){ if(($(this).val() === ...

javascriptjqueryoptimization

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

javascriptjqueryhtmlcsscarousel

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

javascripthtmlcsstwitter-bootstrap

Weekday Filter in Angular 2

Looking to utilize the date pipe feature in Angular 2, specifically aiming for output that only includes the weekday name, such as "Wednesday." I am aware of the typical method to achieve this: {{ strDate | date :'fullDate' }} This would resul ...

angular

Unable to retrieve data from all clients in Angular / Nest.js using socket.io

I have been experimenting with socket io in a small project using angular and nestjs. However, I am facing an issue where the data is only being received on the same client that it was sent from. The other clients are not updating their components after e ...

angularwebsocketsocket.ionestjs

The caching mechanism in IE 11 is preventing Ajax from loading and displaying data

Utilizing Ajax to verify data and display it on the page, alongside implementing varnish cache. The data appears correctly on all web browsers, with the exception of IE 11, unless the varnish cache is disabled. function checkMyData() { var surl = 'in ...

javascriptajaxdebugginginternet-explorervarnish

How to securely retrieve a document by integrating Angular 2 with a web API

I am currently working on an Angular 4 and web API application where I am attempting to download a file using Web API and TypeScript Blob. The code below showcases how this process is executed. However, upon trying to open the downloaded image, I encounter ...

angularasp.net-web-api

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

I am facing difficulties deploying my project on netlify due to NPM errors. Below are the dependencies: "dependencies": { "@angular/animations": "~15.1.1", ... (list of dependencies continues) ...

javascriptangulartypescriptnpmdependencies

Inconsistent behavior between Chrome and Firefox when using AngularJS $resource GET method: success in Chrome but error

I am currently working on a simple custom GET request in Angular using $resource angular.module('myApp') .factory('MyService', function($resource){ return $resrouce('some url', {}, { list: {method:'G ...

javascriptangularjsgoogle-chromefirefoxangular-resource