Convert an interface type variable to a string representation

Question

Convert an interface type variable to a string representation

I'm just starting to learn angular and I'm attempting to convert my response from an interface type into a string so that I can store it in session storage. However, when I try to save them, they are being stored as [object] in the session storage

Here is my code:


const loginResponse = await this.serverLoginSvc.login(this.serverData);
console.log(JSON.stringify(loginResponse.data));
sessionStorage.setItem('source_auth_data', JSON.stringify(loginResponse.data));

where loginResponse is of type

ApiResponseModel<AuthResponseModel>

interface

Please help me figure out what mistake I am making here

angular typescript

Answer 1

Answer №1

For further information on sessionStorage, please visit this link.

It is advisable to steer clear of asynchronous storage settings related to login procedures without full control over the response.

In this scenario, I recommend using a library that utilizes localStorage and indexedDB such as local-storage

You can implement it like so:

this.serverLoginSvc.login(this.serverData).subscribe(
  next: (response: ApiResponseModel<AuthResponseModel>) => {
    console.log(response);
    if (response !== undefined && response !== null) {
      this.storage.set('source_auth_data', response.data).subscribe(() => {
        // Perform actions here
      });
    }
  },
  error: error => {
    this.storage.delete('source_auth_data');
  }
);

Keep in mind that the login function should return an Observable.

Answer 2

For further information on sessionStorage, please visit this link.

It is advisable to steer clear of asynchronous storage settings related to login procedures without full control over the response.

In this scenario, I recommend using a library that utilizes localStorage and indexedDB such as local-storage

You can implement it like so:

this.serverLoginSvc.login(this.serverData).subscribe(
  next: (response: ApiResponseModel<AuthResponseModel>) => {
    console.log(response);
    if (response !== undefined && response !== null) {
      this.storage.set('source_auth_data', response.data).subscribe(() => {
        // Perform actions here
      });
    }
  },
  error: error => {
    this.storage.delete('source_auth_data');
  }
);

Keep in mind that the login function should return an Observable.

Convert an interface type variable to a string representation

Answer №1

Similar questions

Configuring CORS settings in Angular-cli

the process of altering properties in vue js

Notify user before exiting the page if there is an unsaved form using TypeScript

Receiving data from a service in Angular 2 with rxjs subscribe throws an error: it is not a

Implementing Routes in Express Using Typescript Classes

What is the best way to retrieve the 5 most recent posts for each genre using Laravel's API

The reCAPTCHA feature in Next.js form is returning an undefined window error, possibly due to an issue with

Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

I need a way to call a function in my Typescript code that will update the total value

Retrieve the property of a Typescript object using a template argument

Ways to showcase my select/option in Angular 14?

When a model is changed from within a jQuery event, Angular 2 fails to update the view

How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Unraveling the structural directive string syntax within our custom Angular directive: A step-by-step guide

Error encountered in Angular 17 SSR: Importing module "@angular/ssr" does not have the exported member "REQUEST"

What is the process for overriding the module declaration for `*.svg` in Next.js?

Angular 2 file upload encountering CORS issue leading to 401 unauthorized error

Implementing data binding for arrays of inputs in Angular

The quantity of documents queried does not align with the number of data counts retrieved from Firestore

Exporting a Typescript interface from a restricted npm package