title: Javascript nested dictionary null values
body: <p>Below I have declared a 'class' in JS and am writing methods for it. The class represents a widget (<a href="https://stackoverflow.com/questions/22914385/creating-reusable-widgets-with-javascript/22915642?noredirect=1#comment34987056_22915642">more info class structure</a>). </p>
  
  <p>The problem I'm having is that when I print 'this' inside the setAttr ibutes method, the output is:
  <img src="https://i.stack.imgur.com/uuxBP.png" alt="enter image description here"></p>
  
  <p>And when I print  'this.opts' in the very next line:
  <img src="https://i.stack.imgur.com/tB1Ul.png" alt="enter image description here"></p>
  
  <p><strong>NOTE</strong>: The values of 'status' and 'power' are shown as 'null' in the second output before expanding it. This can be the only possible reason behind getting 'null' while trying to print 'this.opts.status'.</p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>function PowerStatus(options) {
      this.opts = {
          meterName: '-',
          displayName: null,
          status: null,
          power: null,
          mainDiv: null,
      };
      this.opts = $.extend(this.opts, options);
      this.opts.mainDiv = '#' + this.opts.mainDiv;
      this.onClick = function () {
          console.log('Clicked ' + this.opts.meterName);
      };
  
      // fill in missing attributes
      this.getAttributes();
      this.setHtml();
      this.bindUIActions();
  }
  
  PowerStatus.prototype.getAttributes = function () {
      var _this = this;
      if (this.opts.displayName == null) {
          getDisplayName(function (dName) {
              _this.opts.displayName = dName;
          }, _this.opts.meterName);
      }
      if (_this.opts.status == null || _this.opts.power == null) {
          _this.getStatus(function (status, power) {
              _this.opts.status = status;
              _this.opts.power = power;
          }, _this.opts.meterName)
      }
  };
  
  PowerStatus.prototype.setHtml = function () {
      var _this = this;
      var divType = this.opts.mainDiv.split('-').slice(1).slice(0, -1).join('_');
      var url = '/static/' + divType + '/html/' + divType + '.html';
  
      $(this.opts.mainDiv).load(url, function () {
          _this.setAttributes();
      });
  };
  
  
  PowerStatus.prototype.setAttributes = function () {
      var div = $(this.opts.mainDiv).find('.load-name');
      var span = $('span:first', div);
      span.text(this.opts.displayName);
  
      div = $(this.opts.mainDiv).find('.load-value');
      span = $('span:first', div);
      span.text(this.opts.power);
  };
  
  PowerStatus.prototype.bindUIActions = function () {
      var _this = this;
      $(this.opts.mainDiv).on('click', function () {
          _this.onClick();
      });
  };
  
  PowerStatus.prototype.getStatus = function (callback) {
      $.ajax({
          method: "GET",
          dataType: "json",
          url: "/widget/power_status/status/",
          data: {name: this.opts.meterName},
          success: function (data) {
              if (typeof callback === "function") callback(data.status, data.power);
          },
          error: function (jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
          }
      });
  };
  </code></pre>