An error was encountered while parsing JSON data in Angular due to an unexpected token

Question

An error was encountered while parsing JSON data in Angular due to an unexpected token

I am currently working on implementing role-based authorization in my project. The goal is to hide certain items in the navigation bar based on the user's role. I encountered an error as shown below. How can I resolve this?

service.ts

roleMatch(allowedRoles):boolean{
    var isMatch =false;
    var userRoles:string[]=JSON.parse(localStorage.getItem('userroles')); //the issue occurs here
    allowedRoles.forEach(element => {
      if(userRoles.indexOf(element)>-1){
        isMatch=true;
        return false;
      }
    })
    return isMatch;
  }

component.html

<li *ngIf="Authentication.roleMatch(['Fetch user',
          'add user',
          'edit user',
          'change status',
          'delete user',
          'delete role',
          'Fetch Recuirtmentdetails'])">
          <a  routerLink="/role"class="dropdown-item">User Role</a>
</li>

json angular angular5 angular6

Answer 1

Answer №1

When looking at the userroles value, it consists of various role permissions such as Fetch user, add user, edit user, change status, delete user, delete role, and Fetch Recruitmentdetails.

This value is in string format and can be parsed using JSON.parse().

To extract the values efficiently, you just need to use var userRoles:string[] as shown below:

var userRoles:string[] = localStorage.getItem('userroles').split(',');

By following this method, you will achieve the desired outcome.

Answer 2

When looking at the userroles value, it consists of various role permissions such as Fetch user, add user, edit user, change status, delete user, delete role, and Fetch Recruitmentdetails.

This value is in string format and can be parsed using JSON.parse().

To extract the values efficiently, you just need to use var userRoles:string[] as shown below:

var userRoles:string[] = localStorage.getItem('userroles').split(',');

By following this method, you will achieve the desired outcome.

An error was encountered while parsing JSON data in Angular due to an unexpected token

Answer №1

Similar questions

Utilize the effectiveness of the Ajax Success Handler for retrieving a distinct JSON entity

What could be causing the version error when running 'pip install json'?

Unraveling JSON data in AngularJS

The AngularJS 2 TypeScript application has been permanently relocated

Converting a Dataframe or CSV to a JSON object array

What is the process for deserializing a string that contains a quote within its value?

What steps should I take to resolve an Angular error that occurred following the installation of Font Awesome

Utilize dynamically generated Java Strings to assign JSON values for effective Karate integration testing in a dynamic manner

What is the best way to modify my if statement to avoid output duplication in my outfile?

Tips on looping through a dynamic FormControl using Angular2 and FormBuilder

Comparing NativeScript and Flutter

Creating a naming convention for constants in Angular schematics

SyntaxError: Unexpected token '<' in Angular 6

Avoid using <input oninput="this.value = this.value.toUpperCase()" /> as it should not convert the text displayed on the "UI", rather it should send the uppercase value

The usage of @Inject('Window') in Angular/Jasmine leads to test failures, but removing it results in code failures

Issue with Angular: ngForm object does not capture selected option

Issue: Formcontrolname attribute is undefined causing TypeError when trying to retrieve 'get' property.Remember to define formcontrolname attribute to

Mastering checkbox selection in Angular reactive formsLearn how to effortlessly manage the checked status of

How can I obtain the model values for all cars in the primary object?

When attempting to call methods after executing a new Class in Android Studio, the application crashes