title: JavaScript Objects: Property Set but Returns undefined When Accessed
body: <p>Greetings,</p>
  
  <p>I'm working with a JavaScript object that is defined like so:</p>
  
  <pre><code>var ytVideoData = new Object();
  </code></pre>
  
  <p>I then assign a value to it inside of a jQuery .ajax():</p>
  
  <pre><code>$.ajax({
      type: "GET",
      url: "xmlproxy.php?url="+ytId+"&amp;mode=native",
      success: function(data) {
  
          ytVideoData.thumbnail = $(data).find("media\\:thumbnail[yt\\:name='default']").attr("url"); // default thumbnail image
      }
  });
  </code></pre>
  
  <p>In another function, I want to access the thumbnail property I just set. However, when I do:</p>
  
  <pre><code>function addPlaylistItem(tumblrUser, videoData) {
      console.log(videoData.thumbnail);
  }
  </code></pre>
  
  <p>All I get in the console is "undefined". When I do:</p>
  
  <pre><code>console.log(videoData);
  </code></pre>
  
  <p>I get the entire object logged to the console and can see the thumbnail property properly set inside of the object like so:</p>
  
  <p><a href="http://mp3.deceast.com/js-objectissue.jpg" rel="nofollow">http://mp3.deceast.com/js-objectissue.jpg</a></p>
  
  <p>After trying several different methods I just can't seem to get it work. How do I access this object property?</p>