Angular store a JSON array into `LocalStorage` and displaying on the html

Question

I'm sorry that I have asked a similar question but I have been struggling with this. As you can see from the getById is where the array is located on the page.

Browser preview of the HTML

Here is the typescript file:

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DashboardService } from '../dashboard.service';
 import { UserRole } from 'src/app/models/user';

 @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;

     ngOnInit() {
         this.getById();
         this.accessToken = localStorage.getItem('accessToken');
         this.Userid = localStorage.getItem('UserId');
     }

     getById() {
         this.dashboardService.getUsersId(1).subscribe((res) => {
             console.log(res);
             this.responseId = res;
         })
     }
 }

The JSON response I'm trying to receive is like this:

{
    "Id": 1,
    "Fullname": "test name",
    "Username": "test",
    "Password": "$2a$10$f.upx2WTxlriul4QK/1GSuCxd6Dmw7.NgVeJ2VfuiC0uIZai5rsD6",
    "PasswordSalt": "$2a$10$uCpbT0wAGFx5NxCwlZOkK.",
    "Enabled": true,
    "Locked": false,
    "Deleted": false,
    "LogonAttempts": 0,
    "LastLogon": null,
    "LastModifiedBy": "Tester",
    "LastModifiedOn": "2020-09-14T16:08:35.853Z",
    "CreatedBy": "Tester",
    "CreatedOn": "2020-09-14T16:08:35.853Z",
    "UserRoles": [{
        "Id": 3,
        "Roles": "Admin",
        "RolePermissions": [{
                "Id": 1,
                "Permission": "Administrator"
            },
            {
                "Id": 2,
                "Permission": "Currency"
            }
        ]
    }]
}

and my HTML page is like this:

<p>Token: {{accessToken}}</p>
<a routerLink="titles" class="btn btn-primary mr-3">Titles</a>
<a routerLink="exercise-questions" class="btn btn-primary">Exercise Questions</a>
<a routerLink="customers" class="btn btn-primary">Customers</a>
<a routerLink="flavours" class="btn btn-primary">Flavours</a>
<p> UserID {{Userid}} </p>
<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>
        <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>
            <li><span>Role Permissions </span>{{responseId.UserRoles}}</li>
        </ul>
    </div>
</div>

All I wish to do is to save Fullname, LastLogon & Role Permisisons into localStorage and then to be able to display that on the html page. So far I have been able to display Fullname, and lastlogon but haven't been able to store to the localStorage.

ng-hobby · Answer 1 · 2020-09-22T15:04:29.710

0

Role Permissions is an array of objects, So to display in your html you have to do something like this:

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

To store the desired values on localStorage simply create a function on your DashboardComponent and use localStorage.setItem() and JSON.stringify() for your RolePermissions like this:

dashboard.component.ts

getById(){
  this.dashboardService.getUsersId(1).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("RolePermissions", JSON.stringify(data.UserRoles[0].RolePermissions))
}

The result will be like this:

edited Sep 22 '20 at 15:04

answered Sep 22 '20 at 14:52

ng-hobby

2,077
2
13
26

this is what i wanted thank you, only problem it is not displaying in html but hopefully i can work out why it isn't. – Steven983 Sep 22 '20 at 15:16
You're welcome, let me know if there is any problem. if you want to show the values based on the current values on LocalStorage, you can have a similar method which is get invoked on `ngOnInit()` and get the value from localStorage – ng-hobby Sep 22 '20 at 15:18
thanks agian, if i could give karma i would :) and will remember that for the future re invoking with ngOnInit() – Steven983 Sep 22 '20 at 15:20
maybe you can help me here ? https://stackoverflow.com/questions/64027183/how-can-i-pass-all-localstorage-values-to-response trying to move everything to a service. – Steven983 Sep 23 '20 at 13:16

Angular store a JSON array into `LocalStorage` and displaying on the html

1 Answers1