Tips for showcasing the Back-end response using Sweetalart2

I am struggling to show specific error responses from the back-end in Sweetalert2 messages. I have been able to display general error text, but cannot figure out how to showcase the exact error message received from the API.

For instance, when entering an incorrect username, the API response is "{"message":"User Not Found"}"

Similarly, for an incorrect password, the API response is "{"message":"Authentication Failed"}"

In the code below, I tried changing the SweetAlert title to 'title: error.statusText,' but it only shows 'Bad request'.

How can I accurately display the specific error messages retrieved from the backend instead of just the error status text?

Furthermore, I am unsure why my console.log(error) is not functioning within the following code snippet.

signIn() {
this.authService.login(this.Username, this.Password).subscribe(
  (data) => localStorage.setItem('Token', data),
  (error) => Swal({
    title: error.statusText,
    type: 'warning',
    confirmButtonText: 'Try Again'
  }),
//console.log(error)
  function (complete) {
    Swal({
      toast: true,
      position: 'bottom',
      type: 'success',
      title: 'Login Successful!',
      showConfirmButton: false,
      timer: 3200
    })
    this.router.navigate(['/userDashboard']);
    this.authService.setLoggedIn(true)
  }.bind(this));
}

Answer №1

Rename the title as error.message

(error) => Swal({
    title: error.message,
    type: 'warning',
    confirmButtonText: 'Try Again'
}),

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

What are the steps to resolve the DOMException error "Failed to execute 'open' on 'XMLHttpRequest': Invalid URL" in Angular HttpClient when making requests to a third-party server or API?

I am encountering the following issue: DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL while trying to perform a GET request to debounce.com import{HttpClient} from '@angular/common/http'; export {T ...

What is the method to cancel an Observable subscription without having a reference to the object of type "Subscription"?

If I were to subscribe to an Observable without an object of type "Subscription," how can I properly unsubscribe from it? For instance, if my code looks something like this: this.subscription = bla ... I know I can easily unsubscribe using the following ...

The Angular2 Ng Date Time picker appears oversized upon opening

Utilizing the Ng Date Time picker in conjunction with Angular2 frontend, which can be found at: I attempted to replicate the examples from this source: https://stackblitz.com/github/DanielYKPan/owl-examples/tree/date-time-picker?file=src%2Fmain.ts I ins ...

Is there a way to disable a button and have it also clear the value upon clicking?

Is there anyone who can assist me? I am looking for help to modify the following code so that... The button should only be clickable when the username field is not empty. Clicking on the button should clear the username input. Below is the code snip ...

An error was encountered in compiler.js at line 1021, stating that an unexpected value 'UserService' was imported by the module 'UserModule'. It is recommended to add a @NgModule annotation to resolve this issue

As a PHP programmer new to Angular, I am facing an issue while trying to retrieve user properties from a Laravel API. When attempting this, I encountered the following error: compiler.js:1021 Uncaught Error: Unexpected value 'UserService' importe ...

Creating OL maps with subpar quality using the Ionic framework

I'm currently facing an issue while trying to load the OL map with Ionic. When I use 'ionic serve' to load it, the map displays perfectly in the browser. However, when I try to load the map on a mobile device, the quality drastically decreas ...

The requested resource does not have an 'Access-Control-Allow-Origin' header

- ISSUE: The XMLHttpRequest to 'https://*.execute-api.*.amazonaws.com/api' from 'http://localhost:4200' is blocked by CORS policy. The preflight request doesn't have the necessary 'Access-Control-Allow-Origin' header. ...

The @Prop property decorator in Vue cannot be utilized as it is not compatible

I have a Vue 2 component with TypeScript: import Vue from 'vue'; import Component from 'vue-class-component'; import Prop from 'vue-property-decorator'; @Component({ template: require('./template.html'), }) expo ...

Custom Angular component experiencing issues with displaying pre-selected options

I'm currently working on a component with a multi-select dropdown feature. The goal is to be able to provide a list of objects (specifically ICatagory in my case) for the options when creating an instance of this component. Additionally, I want to pas ...

What is the proper way to designate the path for images in a CSS file?

Is there a way to define the image path in CSS styles for a component? The styles are saved in the assets directory, while the components are stored in another location. It becomes quite long when I attempt to set the full path. For example: background: ...

Mapping a list of records by a nested attribute using Typescript generic types

In my current project, I am implementing a unique custom type called "RecordsByType", which is currently undefined in the code snippet below. Within this snippet, I have various types that represent database records, each with its type defined within a ne ...

Struggling to display my array data retrieved from the database on my Angular 5 page

I hope everyone is doing well. I am currently facing a problem with retrieving data from Firebase. I have an array within an array and I want to display it in my view, but I am encountering difficulties. Let me share my code and explain what I am trying to ...

An illustration of object destructuring using multiple arguments in rest notation

Here's a snippet of code that I've been working on: onFilterChange = ({name}: {name: string}) => { console.log(`entered onFilterChange and name is ${name}` ); } When there's only one argument, everything runs smoothly. However, whe ...

Show image using Typescript model in Angular application

In my Angular (v8) project, I have a profile page where I typically display the user's photo using the following method: <img class="profile-user-img" src="./DemoController/GetPhoto?Id={{rec.Id}}" /> However, I am considering an alternative ap ...

What is the best way to transfer information between sibling child components under the same parent in Angular 4?

I am dealing with a parent component A that has two child components B1 and B2. B1 interacts with an API to fetch some data which needs to be consumed by B2. Is there a way to directly pass the data from B1 to B2? If not, what is the best method to transf ...

AGGrid - Identifying When a Row Group is Opened or Closed in a Server-Side Model

After referencing the AG Grid documentation, I discovered that the RowGroupOpened event is triggered both when a Row Group is opened and closed. Currently, I am utilizing Angular 7 along with AG Grid Enterprise Version 20 (still in the evaluation phase). ...

The Ng-bootstrap dropdown menu fails to activate when clicked within a table row with a click event listener

By simply clicking on a table row, users can easily view the details. When I incorporate a 'ng-bootstrap' dropdown menu in the last column of the data table, it seems that clicking on the dropdown button does not open the menu as expected. Inste ...

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Looking to create a React TypeScript Redux application that showcases a table using an API endpoint provided at https://example.com/users The goal is to construct a table with 4 columns: Name, Email, City, and Company, utilizing the API response to popula ...

Combining Multiple TypeScript Declaration Files into an NPM Package for Seamless Importing with index.d.ts

I have a unique package structure that includes: myPackage/ |- types/ | |- type1.d.ts | |- type2.d.ts |- src/ | |- someUtilities.ts |- index.ts |- package.json |- tsconfig.json In my package, the index.ts file is handling imports and exports for all th ...

Nextjs has a tendency to generate an excessive amount of .js and .css files

When using nextjs and Typescript, I encountered an issue in production mode where too many .js and .css files are being loaded sequentially instead of in parallel. I expected nextjs to generate all of these processes in one webpack file, but that is not ha ...