Property undefined with all alert points filled

According to the console, I am facing an issue while trying to route to the dashboard after logging in because the surname property is undefined. However, when I check my alerts, I can see that it is filled correctly at all times.

login(surName: string, passWord){    
    const name = this.members.find( x => x.surname === surName)
    const pass = this.members.find( x => x.password === passWord)
    if(name && pass){
      for (const element of this.members) {
        if(element.surname === surName){
            alert(element.surname + surName);
            this.persist.setPersistence(surName, element.color);
            alert("You are Logged in" + element.surname + element.color);
            this.router.navigate(['/dashbaord']);
            return;
        }
    }
    }else{
      alert("User Details are incorrect please make sure your username and password is correct");
  }
}

I have checked from the point where data is being entered to when the login button is pressed and the values being passed into the set function. This is where the error occurs despite me being able to see the value, so I am puzzled about what might be happening

import { Injectable } from '@angular/core';
import { Persistance} from '../Persistance/persistance.model'

@Injectable({
  providedIn: 'root'
})
export class PersistService {
  persist: Persistance;
  constructor() { }

  setPersistence(surname : string, color: string){
    alert(surname);
    this.persist.surname = surname;
    this.persist.color = color;
  }
}

The Error:

core.js:4197 ERROR TypeError: Cannot set property 'surname' of undefined

Although I can observe the property being defined at all points where it's assigned or used, I'm still unable to understand why this error is occurring

Answer №1

Consider using the following code snippet:

data = DataStorage {};

This piece of code should work for you. Your data structure has not been properly set up yet, therefore you are unable to assign any values to its properties.

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

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

I encountered an issue while setting a value in the constructor of my page's constructor class. I made a call to the provider to fetch data. Within the service call, I was able to retrieve the data successfully. However, when I tried to access my vari ...

Having trouble using the 'in' operator to search for 'Symbol(StrapiCustomCoreController)' while transitioning Strapi to TypeScript

I'm in the process of converting my strapi project to typescript. I've updated all strapi packages to version 4.15.5 and converted the files to ts extension. However, upon running strapi develop, I encounter the following error: [2024-01-03 10:50 ...

I'm curious about the Next.js type that corresponds to the Redirect object

It's possible to set up redirection in Next.js by configuring it like this: module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] ...

Angular 2 .net core project experiencing issues with missing files in the publish folder

Exploring the Angular 2 template within a .NET Core framework, as detailed in this resource . However, upon publishing the solution, I noticed that all the files within the "app" subfolder of ClientApp are missing. This leads to a situation where my esse ...

What is the best way to pass form values from child components to parents when utilizing a value accessor implementation?

What is the most effective method to retrieve the values of a child component control group from a parent component? I have currently implemented this using value accessor, but I am curious about the best approach. You can check out the plunker demo I have ...

Error Detected: An unhandled error occurred, triggering a promise rejection: TypeError: The super expression must be either null or a function in Angular version 6

Upon deploying the application on AWS Elastic Beanstalk, an error has surfaced. While the build and deployment processes were successful, one module is giving a Super Expression error. The other modules are functioning correctly, and everything works fine ...

Tips for transferring TimeZone Name from Angular to .NET API

Currently, the API I am working with accepts TimeZone names (such as America/Denver) as a string. In my Angular UI application, I automatically pass the browser timeZoneName to the API. However, when the API receives the string America/Denver, it interpret ...

Angular 6 Error: Unable to access property 'e4b7...f' as it is undefined

I'm encountering an issue while trying to initialize an object based on a TypeScript interface. Even though I am assigning a value, I still receive an error stating that the property is undefined. interface ITableData { domainObjectName: string; ...

Unable to establish a connection to 'X' as it is not recognized as a valid property

Trying to implement a Tinder-like swiping feature in my Angular project, but encountering an error stating that the property parentSubject is not recognized within my card component. Despite using the @Input() annotation for the property, it still fails to ...

Tips for turning off automatic retries in Nuxt 3 when utilizing useFetch

Struggling with the useFetch composable in Nuxt 3, I am facing an issue. I need the request to be triggered only once regardless of the result. Unfortunately, I haven't been able to figure out a way to achieve this. It keeps retrying when the request ...

What could be causing my mdx files to not display basic markdown elements such as lists and headings? (Next.js, mdx-bundler)

Trying to implement Kent C Dodds mdx-bundler with the Next.js typescript blog starter example is proving challenging. While it successfully renders JSX and certain markdown elements, basic markdown syntax like lists and paragraph spacing seem to be malfunc ...

becoming a member of cdk scroll strategy notifications

In the process of creating a unique service that generates cdk overlays, I am faced with the challenge of listening to cdk scroll strategy events. Specifically, I am interested in detecting when the cdk closes an overlay using the "close" scroll strategy. ...

Dealing with JSON data in the format of `(Object object)` requires a specific approach

I originally encountered object object when attempting to display JSON API data in HTML. I then used keyvalue in *ngFor which allowed me to display the object, but I am wondering how I can access and display the entire JSON data? Here are the relevant cod ...

Error Message in Terminal When Launching React Application Using Webpack

I am encountering several errors in the node terminal while attempting to launch my react-app [at-loader] ./node_modules/@types/webpack/index.d.ts:23:16 TS2665: The module name in augmentation is invalid. Module 'webpack/lib/dependencies/HarmonyE ...

Tips for eliminating the draggable item's shadow in Angular

Is there a way to remove the shadow seen under the backdrop when dragging an item in the Bootstrap modal dialog? In the image provided, I am trying to drag the "Personal Details" button..https://i.stack.imgur.com/uSNWD.png ...

Difficulty with the value binding issue on input text produced by *NgFor

When using *ngFor in Angular to loop over an array and generate input text elements bound to the values in the array, I'm encountering some issues. The value is not binding correctly when a user inputs something into the text field. I attempted to ru ...

The inclusion of Angular 2 router queryParams in the URL is not happening

I implemented an auth guard to protect certain pages of my web-app. In order to enable users to return to the page they intended to access, I tried adding queryParams to the URL during a redirect. Initially, the code below worked as expected. However, rece ...

Exciting Update: Next.js V13 revalidate not triggering post router.push

Currently using Next.js version 13 for app routing, I've encountered an issue with the revalidate feature not triggering after a router.push call. Within my project, users have the ability to create blog posts on the /blog/create page. Once a post is ...

Tips and tricks for setting up a functional react select component using Material UI

Having an issue with React Select material UI where the dropdown select is not functioning properly. The popup does not open up as expected. I am looking to display react select in a modal dialog box. import MenuItem from "@mui/material/MenuItem" ...

React Scheduler by Bryntum

After successfully discovering some functions related to various actions, I find myself still in need of additional functions: Currently, I am utilizing these functions by passing them directly as props to the Scheduler React Component: - onBeforeEventSa ...