title: Basic JavaScript object structure help accessing properties
body: <pre><code>(function (window, document, $, undefined) {
      "use strict";
      //we cache a few useful values, like jQuery wrapped window and document
      var $window = $(window),
        $document = $(document),
  
      ProjectManagement = {
  
          // Cache Properties
          cache: {
            jsonPromiseCache: {},
          },
  
          init: function(){
              console.log('ProjectManagement.init() Function ran');
  
              // Call the User module
              ProjectManagement.modules.User.populateUserlistJson('test userlistJsonData data');
          },
  
          modules: {
              User: {},
              Milestones: {},
              Tasks: {},
          },
      };
  
      // Run Init on DOM Ready
      $(function() {
          ProjectManagement.init();
      });
  
  }(this, document, jQuery));
  </code></pre>
  
  <p>Based on this exact code structure above.  How could I load an Object with its own similar style functions and properties into this property:</p>
  
  <pre><code>ProjectManagement.modules.User
  </code></pre>
  
  <p>Something like this would be loaded into the above code where I have <code>ProjectManagement.modules.User</code> ...  </p>
  
  <pre><code>(function(){
      ProjectManagement.modules.User = {
  
          cache: {
              userlistJson: '',
          },
  
  
          init: function(){
              console.log('ProjectManagement.modules.User.init() Function ran');
          },
  
          populateUserlistJson: function(userlistJsonData){
              ProjectManagement.modules.User.cache.userlistJson = userlistJsonData;
  
              console.log('ProjectManagement.modules.User.populateUserlistJson(userlistJsonData) Function ran from ProjectManagement.init()', userlistJsonData);
  
          },
  
          getUsers: function(){
  
          },
      };
  })();
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE with a JSFiddle Demo</strong></p>
  
  <p><a href="http://jsfiddle.net/jasondavis/cpvsado1/" rel="nofollow">http://jsfiddle.net/jasondavis/cpvsado1/</a></p>
  
  <p>In the demo I get this error <code>Uncaught TypeError: ProjectManagement.modules.User.populateUserlistJson is not a function - line 44</code></p>
  
  <p>Line 44 is this: <code>ProjectManagement.modules.User.populateUserlistJson('test userlistJsonData data');</code> which is inside the <code>ProjectManagement.init()</code> function.</p>
  
  <p>If I try to put the code for <code>ProjectManagement.modules.User</code> above the code for <code>ProjectManagement</code> then I get this error below since my <code>ProjectManagement</code> object hasn't been defined yet:  </p>
  
  <pre><code>Uncaught ReferenceError: ProjectManagement is not defined - line 25  
  </code></pre>
  
  <p>Line 25 is the start of the user object code:  <code>ProjectManagement.modules.User = {</code></p>
  
  <p>I am looking for help in modifying the <code>ProjectManagement.modules.User</code> code so that I can access functions and properties from this inside my core <code>ProjectManagement</code> object.  </p>
  
  <p>MY real project has about 6,000 lines of code and I do not want to completely change its core structure however the structure for my "modules" can be changed as needed to be able to work in the way I described.</p>
  
  <p>IN my core <code>ProjectManagement</code> object I want to be able to simply load the code into the page for each module and can functions and access property data from these module objects inside my <code>ProjectManagement</code> obnject</p>