CODEWITHSUNDEEP
javascriptjqueryhtml
Rushi Parikh
Rushi Parikh

Reputation: 454

i am getting undefined value in my javascript object property

i have a codepen that basically takes value from openweather and tries to set it according to an app state. I cannot seem to figure out why i am getting an undefined value for this.tempValue and this.tempType. here's the code:

`

var app = {

  latitude: '',
  longitude: '',
  tempType : " C",
  tempValue: "",
  getGeoLoc: function (id) {
      //Removed timeout option due to error
      var options = {}; //{ timeout: 3 };
      navigator.geolocation.getCurrentPosition(this.foundLoc.bind(this), this.noloc, options);
  },
  foundLoc : function(position) {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude; 
    console.log('coords ', this.latitude, this.longitude);
    // Call your get weather function
    // Using call to bind the context of `this`
    this.getWather.call(this);
  },
  // Error method
  noloc: function(err) {
     console.log(err.message);
  },
  // Method to get your weather after location is found
  getWather: function() {

      var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + this.latitude + '&lon='  + this.longitude +'&APPID=7bda183adf213c8cfa2ef68635588ef3';
      console.log('URL is: '+url);
      $.getJSON(url, function(data) {
        console.log('Your weather data', data);
        // Do your dom stuff here
       $("#location").text(data.name); 

        console.log("#5 does this work??? ", data.main.temp.toString().slice(0, 2));
        var temp = '';
        this.tempValue = data.main.temp.toString().slice(0, 2);
        var type = "";
        type = this.tempType;
        console.log("#6 what's inside tempType. ", this.tempType);
        $("#temp").html(this.tempValue + this.tempType);
        $("#message").html(data.weather[0].description);
        console.log("#3 what is in the description property. ", data.weather[0].description);
        //function to convert C to F and vice versa and return a string
        function convert (value) {
         var celsius = '';
          var fahrenheit = '';
          var convertedToF = 0;
          var convertedToC = 0;
          if(value == 'fahrenheit') {
        convertedToF =   data.main.temp *  9/5 + 32;
            this.tempValue = convertedToF;
           console.log("#4 fahrenheit value is ", convertedToF); 
          }
          if(value == 'celsius') {
            convertedToC = data.main.temp  -  32;
            convertedToC *=  5/9;
            this.tempValue = convertedToC;
          }
        }
        $("#convert").click( function () {
          convert('celsius');
        }

        );


      });
  },


};

// Make sure to call your initialising function
app.getGeoLoc();

codepen url is: http://codepen.io/rush86999/pen/MKMywE/?editors=1010

Upvotes: 1

Views: 223

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Inside the success callBack of getJSON, the this object will point to jqXHR object(as mentioned by @dfsq). That is why you are seeing undefined for that two variables. There a different methods available to fix this. one of them would be,

$.getJSON(url, function(data) { 
 // ...YOUR CODE...
}.bind(this));

Upvotes: 2

Related Questions