Understanding the contrast between a put request subscription with an arrow versus without in Typescript

I'm sorry if the title is not very clear. In my Angular project, I have come across two different put requests:

  public Save() {
    const types: string[] = this.getTypes.getCurrentTypes();
    this.userTypeService
      .updateTypes(this.userID, groups)
      .subscribe(() => {
        showToast("success", "User types Updated.");
      });
  }

where updateTypes is a function that sends a simple httpPut request.

What sets this apart from another similar function that uses

.subscribe( 
showToast("success", "user types updated");
)

In essence, what does the () => do in the subscribe function? Is there also a proper way to handle errors with this approach?

UPDATE: I've found the solution that works for me by using this code:

public Save() {
    const types: string[] = this.getTypes.getCurrentTypes();
    this.userTypeService
      .updateTypes(this.userID, groups)
      .subscribe(
        result => showToast("success", "User types Updated."),
        error => showToast("error", "Error")
      );
  }

Answer №1

.subscribe( 
  showToast("success", "user types updated");
)

By removing the semicolon to correct the syntax error, the function showToast will be executed immediately and its return value will be passed into .subscribe. This only makes sense if showToast is a factory function that generates and returns other functions, which seems unlikely based on the name. If showToast indeed returns undefined, no subscription will be created.

In summary: this appears to be a bug.

The correct method is to create a function as shown initially, and then pass that function into subscribe so it can be called later.

Is there a proper way to handle errors from the function call?

To handle errors, you need to provide a second function to subscribe that specifies what action to take when an error occurs. For instance:

.subscribe(
  (result) => {
    showToast("success", "user types updated")
  }, // Same function as earlier, for handling success
  (error) => {
    showToast("failure", error)
  } // New function specifically for handling errors
);

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

Incorporating a class into ever-changing Bootstrap Table rows

Looking to enhance my table rows with a class, excluding the header. Struggling to find a way to do this. Any ideas? This is the table in question: <table id="table" class="hidden table table-bordered table-striped table-hover"> <thead> ...

I encountered a "Bad Request" error when trying to login through my nodejs server, and I'm unsure of the reason behind this issue. As a beginner in nodejs, I'm still learning the ins and

passport.use(new LocalStrategy(async(email,password,done) => {    try{     const user = await User.findOne({email:email})     if(!user){        return done(null,false,{message:"Invalid email"})     }     const isValidPassword =aw ...

Error: Trying to access property '1' of an undefined value is not allowed

I'm experiencing a problem that I can't seem to solve. The issue arises after the user logs in. I am using useEffect() to retrieve the user data by using a secret token from localstorage. Everything seems to be working fine - the data, the secret ...

Activate a button utilizing jQuery keyboard functionality

Here is what I have accomplished so far: http://jsfiddle.net/qEKfg/ I have created two buttons that activate on click and resemble keyboard keys. My goal is to make them animate only when the corresponding keys (CTRL and ...

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

Unable to make colors appear in HTML5 canvas using .fillStyle

Trying my hand at canvas for the first time to create a game. I have an image displaying, but strangely the fillStyle method doesn't seem to be working as expected (the canvas background remains white in Google Chrome). Just a note that in my code, t ...

Create a list that starts with a header determined by an object's attribute within an array

Currently in Vue, I am attempting to create a list based on a specific property within an object. The array being retrieved from the vuex store is structured as follows: const array = [ { name: "British title string" nationality: "British" }, { ...

In the process of using SWRInfinite for React Infinite Scrolling, the initial call may be made

Can someone help me understand why my useGetItems hook, which imports the usePagination hook, keeps repeating the first call history every time I scroll? /items?_page=1&_limit=40 /items?_page=1&_limit=40 /items?_page=2&_limit=40 /items?_page=1 ...

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

Moving a row from one Jquery Datatable to another table

I'd like to merge the rows from table 2 into table 1. If I check a row in the checkbox column and click on "add user," that row will be added to table 1. Next to the "add user" button, there is an option to select all or none. If I click on "select ...

Ways to showcase the contents of a React JavaScript document, or more specifically, a file designed for React interpretation

After trying multiple solutions, I found a conceptual guide on How to call and form a React.js function from HTML. However, the HTML generated doesn't seem to be calling from the JavaScript file as expected. It appears identical to what is mentioned i ...

React: encountering issues with accessing component props after page refresh

Whenever I try to reload the 'details' page (not the homepage) on my app, I encounter the following error: "TypeError: Cannot destructure property 'flag' of 'country' as it is undefined." It seems that the data is ...

How can I preserve the line break in a textarea using PHP?

Is it possible to maintain line breaks in a textarea using PHP? Currently, I have a temporary solution that involves using the exec function to run a shell command, but I would prefer a purely PHP approach. Below is my temporary script - can you help me mo ...

Having trouble with SVG Circles - Attempting to create a Speedometer design

Trying to implement a speedometer in one of the components of my Vue project, but encountering an issue. When I input 0 into my progress calculation for determining the stroke fill, it overlaps with the background circle instead of staying within its bound ...

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

Issue with current time malfunctioning

For my latest project, I've been tasked with creating a karaoke application using javascript. The challenge is to synchronize the lyrics with the song as it plays. Here's a snippet of my HTML code: <div id="lyric"></div> <audio i ...

Node.js Error: The object does not have the specified method

Recently, I dived into the world of node.js by following a fantastic tutorial on node.js, express, and mongodb from Howtonode. However, I encountered an error that doesn't seem to have been addressed in the comments section. The last comment was made ...

Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store. My ques ...

Preventing data binding for a specific variable in Angular 2: Tips and tricks

How can I prevent data binding for a specific variable? Here's my current approach: // In my case, data is mostly an object. // I would prefer a global solution function(data) { d = data; // This variable changes based on user input oldD = da ...

The issue of not being able to go fullscreen with a YouTube iframe nested within another iframe

I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...