Basic JavaScript object structure help accessing properties

Question

(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));

Based on this exact code structure above. How could I load an Object with its own similar style functions and properties into this property:

ProjectManagement.modules.User

Something like this would be loaded into the above code where I have ProjectManagement.modules.User ...

(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(){

        },
    };
})();

UPDATE with a JSFiddle Demo

http://jsfiddle.net/jasondavis/cpvsado1/

In the demo I get this error Uncaught TypeError: ProjectManagement.modules.User.populateUserlistJson is not a function - line 44

Line 44 is this: ProjectManagement.modules.User.populateUserlistJson('test userlistJsonData data'); which is inside the ProjectManagement.init() function.

If I try to put the code for ProjectManagement.modules.User above the code for ProjectManagement then I get this error below since my ProjectManagement object hasn't been defined yet:

Uncaught ReferenceError: ProjectManagement is not defined - line 25

Line 25 is the start of the user object code: ProjectManagement.modules.User = {

I am looking for help in modifying the ProjectManagement.modules.User code so that I can access functions and properties from this inside my core ProjectManagement object.

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.

IN my core ProjectManagement 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 ProjectManagement obnject

You have a complex object X, to a property of which you need to load another complex object. What is the problem now? — Charlie
– Charlie, Commented Oct 26, 2015 at 6:34
I believe if you make project management as a function, you can create objects using new keyword. — Rajesh Dixit
– Rajesh Dixit, Commented Oct 26, 2015 at 6:39
@CharlieH I updated my question with a better example and a JSFiddle demo to show the issues I have. Basically my ProjectManagement object code structure cannot really change but the other user modules stuff can be modified anyway it needs to be able to work in a way that I can load it as a separate object and access its functions and properties from inside my core ProjectManagement object. Any ideas? — JasonDavis
– JasonDavis, Commented Oct 26, 2015 at 7:00
do you know what mean: "use strict";? Main problem - in first function you create local variable, and try get it from second function. — Grundy
– Grundy, Commented Oct 26, 2015 at 7:03

Grundy · Accepted Answer · 2015-10-26 07:11:45Z

Main problem here: ProjectManagement is a local variable, so it can't be access from another function.

You can just add this object to window object, and use as global.

JSFiddle

Also you can just pass this object to function:

(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();
    });
  
    window.ProjectManagement = ProjectManagement;

}(this, document, jQuery));

(function(ProjectManagement){
    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(){

        },
    };
})(window.ProjectManagement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

awesome thank you. My main object ProjectManagement uses JS Promises to load in JSON data for several items user list, milestones, tags, current logged in user data and ACL permissions, and more. Since the Promise loads all this data at once it was just easier to have 1 function ion my main object load it all and then pass the JSON data to each module object instead of having each module object make a separate AJAX call on its own.........
.......So after loading all the JSON I plan to pass it to the modules like the demo shows and then each module object will simply have functions to work with and manipulate the data and return to the core project object. This was my first JS project so its all a learning process and i'm sure its not the best way to do it but so far it works and you just solved the last missing puzzle piece so thanks!

Collectives™ on Stack Overflow

Basic JavaScript object structure help accessing properties

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related