Cannot read property 'cards' of undefined in Angular 8

cannot read property 'value' of undefined
cannot read property 'some' of undefined
cannot read property of undefined subway app
cannot read property of undefined react
cannot read property of null
cannot read property 'length' of undefined
cannot read property of undefined angular
cannot read property of undefined typescript

I am newbie working with typescript and angular 8. Below is my ts file.

import { Component, OnInit } from '@angular/core';
declare var jquery: any;
declare var $: any;

@Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css'],
 })

 export class HomeComponent implements OnInit {
 constructor() { }
 title = 'project-name';
 point = 0;
 click = 0;
 element: any;
 rndNo: any;


 cards = [];
 cardTypes = ['Get', 'Set', 'Go'];

 card(cardType: any) {
    cardType = cardType;
 }
 CreateDeck() {
     this.cardTypes.forEach(function (type) {
     this.cards.push(new this.card(type));
   });
 }

 getRandomInt(min: number, max: number) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
 }

 shuffleDeck(shuffleCnt: any) {
     for (let i = 0; i < 3; i++ ) {
         const rndNo = this.getRandomInt(0, 2);
         this.card = this.cards[i];
         this.cards[i] = this.cards[rndNo];
         this.cards[rndNo] = this.card;
     }
  }

  ngOnInit() {
     this.CreateDeck();
     console.log(this.cards);
     this.shuffleDeck(this.getRandomInt(0, 1));
     console.log(this.cards);
     $('.back').each(function(index: string | number) {
        if (this.cards[index].cardType === 'Get') {
            $(this).css('background', 'red');
        } else if (this.cards[index].cardType === 'Set') {
            $(this).css('background', 'yellow');
        } else if (this.cards[index].cardType === 'Go') {
            $(this).css('background', 'green');
        }
     $(this).html(this.cards[index].cardType);
    });
   }

In the above code I am getting a console error :-

    ERROR TypeError: Cannot read property 'cards' of undefined at home.component.ts:28
    at Array.forEach (<anonymous>)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.CreateDeck   (home.component.ts:27)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:46)
    at checkAndUpdateDirectiveInline (core.js:21097)
    at checkAndUpdateNodeInline (core.js:29495)
    at checkAndUpdateNode (core.js:29457)
    at debugCheckAndUpdateNode (core.js:30091)
    at debugCheckDirectivesFn (core.js:30051)
    at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)

On page load when it hits the function CreateDeck, In second line [this.cards.push(new this.card(type));], It throws error saying cards of undefined. I am unable to understand how to solve this issue. Thank you in advance. Please do give advice if I am wrong anywhere or in places I can improve.


  1. You should replace cards = [ ] from your code to cards : any [ ] = [ ]
  2. Change your CreateDeck() function to this:

    CreateDeck() {
       this.cardTypes.forEach((type)=> {
       this.cards.push(new this.card(type));
       });
    }
    

Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined. The dreaded error we all hit at some point in JavaScript development. Could be� Here is a common scenario. // We want to get the value of an input. varinputVal = document.getElementById("input").value; This will result in Uncaught TypeError: Cannot read property 'value' of null. The reason will be that the element with id inputdoes not exist. Let me break it down in simpler steps; varinput = document.getElementById("input"); input // when this fails, it returns null. input = nullvarinputVal = input.value;// this is the same as the following.


Add code as below in your component.ts file

CreateDeck() {
     this.cardTypes.forEach((type:any) => {
     this.cards.push(new this.card(type));
   });
 }

create the class as below and import same "card" in your above component.ts

   export class card{
        public cardType: any;
        constructor(cardType:any){
          this.cardType = cardType;
      }
    }

JavaScript "cannot read property "bar" of undefined, If an object's property may refer to some other object then you can test that for undefined before trying to use its properties: if (thing && thing.foo)� You said any suggestions wold be helpful, so currently I resolved my DataTables "cannot read property 'style' of undefined" problem but my problem was basically using wrong indexes at data table initiation phase's columnDefs section. I got 9 columns and the indexes are 0, 1, 2, .. , 8 but I was using indexes for 9 and 10 so after fixing the


"This" keyword is much more complex then you think

in "Create Deck" function

try to use arrow function

 CreateDeck = () => {
 this.cardTypes.forEach(function (type) {
 this.cards.push(new this.card(type));
 });
 }

or use .Bind() function to bind the function to specify the current context.

How to avoid 'cannot read property of undefined' errors?, Update: If you use JavaScript according to ECMAScript 2020 or later, see optional chaining. TypeScript has added support for optional chaining in version 3.7. I'm trying to create a click event be able to delete an item on my list, but when I click it I get "TypeError: Cannot read property 'props' of undefined". I'm trying to stick to ES6 as much as possible, and I'm pretty sure its something to do binding 'this' somewhere, but I've tried many places and been unsuccessful.


Debugging: "Cannot read property 'length' of undefined.", While looking into an issue with Microsoft Edge and the Facebook sdk a few weeks ago, we ran into a very common error: Cannot read property� Cannot read property 'addEventListener' of null. Ask Question Asked 5 years, 10 months ago. Active 2 months ago. Viewed 490k times 105. 47. I have to use vanilla


Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them,� Cannot read property 'readFileSync' of undefined. If I debug this in the browser (sorry for the minified code): f._compileFile = function(c, d, f) { var g, k; null == d && (d = !1); null == f && (f = !1); k = v.readFileSync(c, "utf8"); with a breakpoint on the last line above, v is undefined.


TypeError: Cannot read property 'name' of undefined � Issue #10803 , 0.0-beta.7 (from 5.3.18), when I run storybook I see an error. hooks.js:232 Uncaught TypeError: Cannot read property� everytime when i try to change somthing in the Alertbox they show me “ Please enter a number greater than or equal to 0” or “ cannot read property ‘settings’ of undefined” icon Best answer by Castorr91 21 December 2019, 14:54