Cant figure out why method is not working in _generateHours.

Getting type error can not read properly. But the method works inside another method in the same class.

 _generateMarkup() {
    console.log(this._weatherIconFormat(this._data.hourly[0].hourCondition));
    `<h1 class="hourly__title title | mb-lg">Hourly</h1>
      <div class="hourly--wrapper">
      ${this._data.hourly.map(this._generateHours).join(" ")}
      </div>`;
  }


  _generateHours(hour) {
    console.log(hour.hourCondition);
    console.log(this._weatherIconFormat(hour.hourCondition));
}

 _generateMarkup() {
    console.log(this._weatherIconFormat(this._data.hourly[0].hourCondition));
    `<h1 class="hourly__title title | mb-lg">Hourly</h1>
      <div class="hourly--wrapper">
      ${this._data.hourly.map(this._generateHours).join(" ")}
      </div>`;
  }


  _generateHours(hour) {
    console.log(hour.hourCondition);
    console.log(this._weatherIconFormat(hour.hourCondition));
}

These methods are for my mark up. One is calling the container markup, and the other is a mapped for the mark up inside. Doing this, so I can dynamically change some classes. It worked fine when the container was static inside index.html file and just the mapped was in one method. For testing I created some logs. I am very lost with why it will not register weatherIconFormat method inside the _generateHours method but works inside the _generateMarkup. I logged the data without the method inside _generateMarkups and that is coming in as it should. Github hosted page: https://bsupinski.github.io/weather_app/ Github Repo https://github.com/bsupinski/weather_app

GitHub

GitHub - bsupinski/weather_app

Contribute to bsupinski/weather_app development by creating an account on GitHub.

12 Replies

Jochem•2y ago

what line are you getting what error on?

Errtu•2y ago

The last console log 16 In hourlyView.ha

Jochem•2y ago

what's the full error?

Errtu•2y ago

It’s in the screen shot attached.

Jochem•2y ago

it's weird, the issue isn't that _weatherIconFormat isn't getting set, it's that this is undefined in that method... That error is formatted as if you're reading a property off an undefined object:

Errtu•2y ago

Yeah I was trying to fool around with using bind(this) but nothing was clicking together.

Jochem•2y ago

I think it's because you're passing _generateHours as an argument on line 10 in hourlyView.js I found this stack overflow message about this getting unbound: https://stackoverflow.com/a/59060545/1093703

Stack Overflow

'this' is undefined in JavaScript class methods

I'm new to JavaScript. New as far as all I've really done with it is tweaked existing code and wrote small bits of jQuery. Now I'm attempting to write a "class" with attributes and methods, but I'm

Jochem•2y ago

so that'd be:

    ${this._data.hourly.map(this._generateHours.bind(this)).join(" ")}

    ${this._data.hourly.map(this._generateHours.bind(this)).join(" ")}

Errtu•2y ago

I just stepped out will try in a bit. I tried something similar but think I had the bind this outside the parentheses. Thank you.

Jochem•2y ago

no worries, hope it works!

Errtu•2y ago

It worked, not sure why will have to research it, i thought bind (this) was more for when this is referring to something outside the scope of the class. All these methods are inside the parent class or the class it self

Jochem•2y ago

the SO message says it's because of passing the method around. I think passing the function around as a variable somehow loses the fact that it's actually a class method, and the binding gets lost. It's not something I knew or encountered before, though

Gaming

Programming

Cant figure out why method is not working in _generateHours.