TypeError: Cannot Read Property 'tigerStart' Of Undefined

I am new to typescript and angular js. I tried to include another component code into my code. which is baby.js code into my code but I am getting an error. TypeError: Cannot read

Solution 1:

In this line:

this.sky.tigerStart();

You're expecting this.sky to be set to something, but it's not. That's because the this is not what you think it is; you are not in the scope you think you are in. Add a console.dir(this) right before this line, refresh the page, and check the browser console if you want to see what your this is. Then figure out some other way to resolve the object you really need there.

Mozilla Developer Network reference article for "this"

Try the following:

// *** Assign this to a variable (self)
var self = this;

that.window = $("#PenguinPopup");
that.window.kendoWindow({
  width: "60%",
  title: false,
  visible: false,
  resizable: false,
  actions: [],
  draggable: false,
  modal: true,
  open: function() {
    $("html, body").css("overflow", "hidden");
    that.isVisible = true;
    $('.kPopUpTitle').html(values.title);

// *** use the self variable instead of this
    self.sky.tigerStart();

The article you mention in your comment is correct, but if you don't really understand what's is happening in the code, it will only confuse you more if you try to do what it's suggesting. You may want to study more about how variable scope works in Javascript. It's a bit confusing in the beginning, but understanding will help you get better at Javascript. I still have problems with it myself, but the way I show here, is fairly easy to understand. Just remember when you declare a variable and you declare functions at the same level (or inside those functions), you can access that variable from inside those functions (unless you create new variables with the same names inside those functions).

Solution 2:

Looking like an object having property key tigerStart is undefined.

You can debug like this :

• First, you should make sure that an object having property key tigerStart actually returns an object and not "undefined".

Example : Suppose tiger is an object having property with key tigerStart.

{
  "tiger": {
    "tigerStart": true
  }
}

if (typeof tiger != 'undefined') {
  /* Your code comes here */
}

Solution 3:

The this keyword refers to the current context. In this case, it is the context of the object you are calling open() with.

that.window = $("#PenguinPopup");
that.window.kendoWindow({
  width: "60%",
  title: false,
  visible: false,
  resizable: false,
  actions: [],
  draggable: false,
  modal: true,
  open: function() {
    $("html, body").css("overflow", "hidden");
    that.isVisible = true;
    $('.kPopUpTitle').html(values.title);
    this.sky.tigerStart();

As you can see the current context is the Object fed into that.window.kendoWindow(). For your given code to work, it would need to look something like this:

that.window = $("#PenguinPopup");
that.window.kendoWindow({
  width: "60%",
  title: false,
  visible: false,
  resizable: false,
  actions: [],
  draggable: false,
  modal: true,
  sky: {
     tigerStart: function () {
        // Do something here...
     }
  },
  open: function() {
    $("html, body").css("overflow", "hidden");
    that.isVisible = true;
    $('.kPopUpTitle').html(values.title);
    this.sky.tigerStart();

Now this.sky exists and you can access the given function.

Solution 4:

sky might be defined, but you are not assigning it a value before you are accessing it. Where are you assigning a value sky?

It is unclear if you mean that you are using Angular or if you mean you are using AngularJS. In the tags you have used the Angular tag. In the description you have mentioned AngularJS. These are two different things. You are also using $ which I assume is jquery. I suggest avoiding mixing jQuery with Angular or AngularJS. It will make your learning process much simpler.