how can i pass all localstorage values to response

Question

I wish to pass fullName, lastLogon, and RolePermissions as at the moment I'm only getting UserId

Sorry I was unable to find an answer to this directly.

dashboard.service.ts

  getUsersById(id): Observable<any> {
    return this.http.get<any>(`https://www.mywebsite.net/umbraco/api/UsersApi/GetUsersById/1${id}`, {
      headers: new HttpHeaders()
        .set('Authorization', this.bearer_token)
    });
  }

  getTheUsersId(){
  this.getUsersId(localStorage.UserId).subscribe((res) => {
    console.log(res);
    this.responseId = res;
    this.StoreOnLocalStorage(res);
  })
}
  
  StoreOnLocalStorage( data: any ) {
   localStorage.setItem("fullName", data.Fullname);
   localStorage.setItem("LastLogon", data.LastLogon);
   localStorage.setItem("UserId", data.Id);
   localStorage.setItem("RolePermissions", JSON.stringify(data.UserRoles[0].RolePermissions))
}

}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DashboardService } from '../dashboard.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor( private activatedRoute: ActivatedRoute,private dashboardService:DashboardService,  ) { }
  accessToken = null;
  UserId = null;
 responseId = null;
 UserRoles = null;
 Fullname= null;

 
  ngOnInit() {
    this.dashboardService.getTheUsersId();
    this.accessToken = localStorage.getItem('accessToken');
    this.UserId = localStorage.getItem('UserId');
    this.Fullname = localStorage.getItem('FullName');
    this.UserRoles = localStorage.getItem('RolePermissions');
  } 
}

At the moment I'm only able to display the UserID as that is only what is being set in the response and I wish to have the other values passed from localstorage

My HTML

<button  class="btn btn-primary mr-3" (click) = "getById()">Get By Id</button>
  <div class="row">
        <div class="col-6">
            <h1>Get By Id</h1>
            <p> UserID {{UserId}} </p>
            <ul *ngIf = "responseId != null">
                <li><span>Id: </span>{{responseId.Id}}</li>
                 <li><span>Fullname </span>{{responseId.Fullname}}</li>
            <li><span>Last Logon: </span>{{responseId.LastLogon}}</li>


            
  <span *ngFor="let role of responseId.UserRoles">
     Id: {{ role.Id }} - {{ role.Permission }}
     UserRole: {{role.Roles}} - {{role.UserRoles}}
 
  </span>

So far only UserID is displayed.

you can see the local storage values by launching "Developer Tools" and then looking into "Application" tab. just to verify — Thakur Amit, Sep 23 '20 at 12:08
all the values are there, just my html no longer displays those values.. it only displays UserID as opposed to fullname, last logon and rolepermissions — Steven983, Sep 23 '20 at 12:09
That problem is three-fold. 1) As @ThakurAmit wrote, you're saving to the localStorage key `fullName` and attempting to retrieve from the key `FullName`, two different keys (I recommend consts to define any strings needed in code, especially if they're used for things like keys). 2) responseId is never set, so it stays `null`, and the part showing names never shows up 3) You never show the value of the variable `Fullname` in the html, only `responseId.Fullname`. If user roles don't show up it's possible that array is empty. — CGundlach, Sep 23 '20 at 14:53
Also, you're writing the localStorage values in a subscription, but don't wait for that to complete before attempting to read from the values from localStorage. It's very much possible that the values are only written in there after your code finishes. Read up on Observables or Subjects, they help you fix this. — CGundlach, Sep 23 '20 at 14:56
Finally, I strongly recommend declaring your variables with types. They, combined with the compiler rules 'no implicit any' and 'strict null checks' help you catch errors a lot earlier. — CGundlach, Sep 23 '20 at 14:59
Can you show me example on how you would write the GetTheUser function? — Steven983, Sep 23 '20 at 17:50

score 0 · Answer 1 · edited Sep 23 '20 at 11:58

0

You can retrieve and store values from localstorage to an object and use it later on. Please refer to below answer for How To?

Get HTML5 localStorage keys

edited Sep 23 '20 at 11:58

Dharman

30,962
25
85
135

answered Sep 23 '20 at 11:53

Gopal Mishra

1,575
1
14
17

how can i pass all localstorage values to response

1 Answers1

Linked