Using Angular2, assign a value to the session and retrieve a value from the session

Question

Using Angular2, assign a value to the session and retrieve a value from the session

I am having trouble getting and setting a session. Here is my code:

login_btnClick() {

        var NTLoginID = ((document.getElementById("NTLoginID") as HTMLInputElement).value);
        this._homeService.get(Global.BASE_USER_ENDPOINT + '/EmployeeDetailsApi?user_id=' + NTLoginID)
            .do(data => sessionStorage.setItem('session',JSON.stringify(data)))
            .subscribe(homes => { this.homes = homes; this.indLoading = false; },
            error => this.msg = <any>error);
        var session = sessionStorage.getItem('session');
        alert(JSON.stringify(session));
        this.router.navigateByUrl('/user');
    }

I keep receiving only null instead of the actual value. I can see the value from

.do(data => alert(JSON.stringify(data)))

. As a newcomer to angular2, I would appreciate any assistance.

angular typescript

Answer 1

Answer №1

When working with Http requests in Angular 2 (or any other framework), it's important to remember that these requests are asynchronous. This means that once your code hits the .do() method, it doesn't wait for the response before moving on to the next line of code. To address this issue, you can modify your code like so:

this._homeService.get(Global.BASE_USER_ENDPOINT + '/EmployeeDetailsApi?user_id=' + NTLoginID)
    .do(data => sessionStorage.setItem('session',JSON.stringify(data)))
    .subscribe(homes => { 
          this.homes = homes;
          this.indLoading = false; 
          var session = sessionStorage.getItem('session');
          alert(JSON.stringify(session));
          this.router.navigateByUrl('/user');
    },
    error => this.msg = <any>error);

Answer 2

When working with Http requests in Angular 2 (or any other framework), it's important to remember that these requests are asynchronous. This means that once your code hits the .do() method, it doesn't wait for the response before moving on to the next line of code. To address this issue, you can modify your code like so:

this._homeService.get(Global.BASE_USER_ENDPOINT + '/EmployeeDetailsApi?user_id=' + NTLoginID)
    .do(data => sessionStorage.setItem('session',JSON.stringify(data)))
    .subscribe(homes => { 
          this.homes = homes;
          this.indLoading = false; 
          var session = sessionStorage.getItem('session');
          alert(JSON.stringify(session));
          this.router.navigateByUrl('/user');
    },
    error => this.msg = <any>error);

Using Angular2, assign a value to the session and retrieve a value from the session

Answer №1

Similar questions

How can RootStateOrAny be turned off in React with typescript?

What steps are needed to generate a production version of a TypeScript monorepo application that can be deployed to an Azure Function App?

Learn the process of invoking Firebase Functions through AngularFire

Why isn't the constraint satisfied by this recursive map type in Typescript?

ESLint has issued a warning indicating that the selector must be utilized as an element

Unable to assign a default value to an Angular input field

Error when accessing JSON property in Angular with Ionic 2: A Strange TypeError

The element 'md-chips' from Angular2 material is unrecognized

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

Creating a unified deployable package for a Spring Boot Rest service and an Angular App in a single war file

What is the best way to arrange map elements in a React application?

Guide to Implementing Kendo-Grid in Angular 4 CLI

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

Can you explain the mechanics behind the functionalities of @angular and @type dependencies?

Adding form input fields in real-time by clicking the add button

Using Angular template to embed Animate CC Canvas Export

Cypress: Importing line in commands.ts is triggering errors

Learn a simple method for converting or assigning an Observable to a Behavior Subject, allowing for seamless sharing between components

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

What is the best way to account for the 'elvis operator' within a given expression?