Discovering the element within an array using the post method in TypeScript

When I log in to the app, it sends me a JSON file with my user permissions like this:

{"StatusCode":0,"StatusMessage":"Authenticated Successfully",
    "Token":"eyJhbGciOiJIUzI1NiIs",
    "StatusDescription":{
    "Role":"admin",
    "Permissions":["homeboxpackageactivate",
    "eventscreate",
    "pollinglivememory",
    "pollinglivememorygetall",
    "usersgetall",
    "app_rolescreate",
    "app_rolesupdatebyid"
     ....]}}

Can you suggest how I can find my permissions from this array?

I have created the following canActivate function:

canActivate(component: string): boolean {
        return this.permissions && this.permissions.find(x => x.permissin_desc === component) != null;
    }

In the HTML code, I use *ngIf like this:

*ngIf="ws.canActivate('usersgetall')"

However, it doesn't show anything because I am not checking inside my Permissions array. Can you please help me with this?

angulartypescript

Answer №1

To determine if the Permissions array contains a specific component, you can utilize the includes method.

canActivate(component: string): boolean {
   return this.Permissions && this.Permissions.includes(component);
}

Remember to pay attention to the casing of your Permission property.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing indexers in TypeScript to accommodate both string and numeric keys

Seeking to incorporate different types into existing code. In the code, there exists a transitionData object in which objects can be added by index as shown below: this.transitionData[id] = transition where id is a number and transition is of type Trans ...

typescript

I am attempting to activate the "about us" button on the website. I have successfully included the path and added a router link to the containing div of the button. However, there seems to be something

In my app, the first step involves specifying the path in the routing module. Following that is defining the home component, then the app component, and finally creating the button using HTML. Setting up the path in the app.routing.module.ts file <div ...

javascripthtmlangularangularjstypescript

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...

cssreactjstypescripttailwind-css

Challenge involving Angular for creating multiline innerHtml contentEditable feature

I am currently working on a project using Angular5 to create a unique type of "text-editor" utilizing div elements with the contenteditable property. This setup allows users to input plain text, but also enables them to select specific text and trigger an ...

angularangular5

The deployment of the remix is unsuccessful in Vercel, even though it functions perfectly during development. The error message states that 'AbortController' is not

I'm new to React and could use some assistance with a deployment issue on Vercel. Any ideas on why this is failing? I haven't explicitly used AbortController anywhere, so I'm suspecting it might be related to one of the installed packages? ...

typescriptvercelremix.run

What steps do I need to take for the function to accurately determine the return type?

class Foo { name: string; constructor({name}: {name: string}) { this.name = name; } } class Bar<T extends Foo> { foo: T; constructor({foo}: {foo: T}) { this.foo = foo; } } class CustomFoo extends Foo { xxx: string; constr ...

typescript

Learning how to use arrow functions with the `subscribe` function in

Can someone help clarify the use of arrow functions in TypeScript with an example from Angular 2's Observable subscribe method? Here's my question: I have code that is functional: this.readdataservice.getPost().subscribe( posts =&g ...

javascriptangulartypescriptarrow-functions

Unveiling the types of an object's keys in Typescript

I am currently utilizing an object to store a variety of potential colors, as seen below. const cardColors = { primaryGradientColor: "", secondaryGradientColor: "", titleTextColor: "", borderColor: "&quo ...

typescriptreact-typescript

Navigating with the Angular router to a child route is causing a redirection to the 404

I'm facing a challenge with navigating to a child component from the parent view. This is how my app-routing configuration looks: const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'fu ...

angularangular-ui-router

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

How to dynamically track changes in Angular2 form fields: Using the formbuilder to

Currently, I'm working with ionic2 and angular2. I have a form constructed using formbuilder but I am looking to monitor any new changes made to a specific input. ionViewDidLoad() { this.purchaseDataForm = this.formBuilder.group({ kms: ['& ...

angularangular2-formsformbuilder

There is no matching overload for this call in React Native

I am working on organizing the styles for elements in order to enhance readability. Here is the code I have written: let styles={ search:{ container:{ position:"absolute", top:0, }, } } After defining the s ...

javascripttypescriptreact-native

What is the method for adding a document within an array that is nested within another document?

Apologies if the title seems complex... I struggled to find a better way to describe it. The scenario I am dealing with fits the following Schemes: Collection1: const mongoose = require('mongoose'); const itemSchema = mongoose.Schema({ _id: ...

node.jstypescriptmongoosemongoose-schemapopulate

Typescript's puzzling selection of the incorrect overload

I have a method structured as shown below: class Bar { public executeInWorker(cb: () => void): void; public executeInWorker(cb: () => Promise<void>): void | Promise<void>; public executeInWorker(cb: () => void | Promise< ...

typescript

Modify the code to use a BehaviorSubject subscribing to an Observable

Currently, I am in the process of learning Angular2 and RxJS by studying someone else's application. The application consists of two modules: asObservable.ts export function asObservable(subject: Subject) { return new Observable(fn => subject ...

angulartypescriptrxjsobservablerxjs5

Steps for creating user accounts and saving user information in Firebase's Real Time Database

Can someone please guide me on how to register a user in Firebase and save their additional details such as first name, last name, etc.? I have created a standard registration form in Angular and successfully registered users with their username and pass ...

angularjsangularfirebasefirebase-authentication

What is the best way for me to determine the average number of likes on a post?

I have a Post model with various fields such as author, content, views, likedBy, tags, and comments. model Post { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt id String @id @default(cuid()) author U ...

javascriptnode.jstypescriptormprisma

React with Typescript - cannot be expressed as a function

I am currently exploring ReactJS and Typescript. While trying to authenticate a user using the methods below, I encountered the following error message: Unhandled Rejection (TypeError): auth.authenticate is not a function onSubmit src/components/Login/ind ...

reactjstypescript

Fixing ngModel and click functionality issues in dynamic HTML content within Angular 4

I am struggling to insert HTML content into a specific id by using Angular. Although the HTML displays, the functionality of ngModel and click event is not working. How do I resolve this issue? app.component.html <div id="myid"> </div> app. ...

angulartypescript