1

I am trying to create an object with an array of objects. Eg: I would like to create a Page object with multiple headers. I need an addHeader() and getHeaders() method. A header itself is an object with few properties (eg name and id). I've been trying to nest it inside the page object as its part and add it to an array of Headers (which I assumed would be a part of Page, but that may not be the ideal solution). I run into trouble when I tried to execute the inner functions. I read this question and few similar on the topic, unfortunately I can't come up with a solution:

No ways to have class-based objects in javascript?

My most up to date attempt: 

var Page = ( function () {
    function Page() {
        var headers = [];
        var header = {
            name:'',
            id:'',
            addHeader : function(name,id) {
                this.name = name;
                this.id = id;
                Page.headers.push(header);
            }
        };
        this.getHeaders = function() {
            for(var i=0; i< Page.headers.length; i++) {
                console.log(Page.headers[i]);
            }
        } 
    }
    return Page;
}) ();

When I'm trying to run getHeaders:

var p = new Page(); p.getHeaders();

I get:

p.getHeaders is not a function

My javascript skills are rather basic, I would appreciate any help or comments. Thank you for your answers.

Could someone explain to me how can I access the inner addHeader function? Is this the correct way of nesting functions in javascript objects?

Community
  • 1
  • 1
monika
  • 489
  • 1
  • 7
  • 17

2 Answers2

4

The way you have it, getHeaders is private to the scope it's in. To make it public, change it to:

this.getHeaders = function() {
    // implementation
};

EDIT

For your addHeader comment - if that's supposed to be a public function, then just do the same thing as getHeaders - a public function. You can skip the whole var header = {...}; thing - based on what you're saying, you don't need that at all. Your function can look something like:

var Page = (function () {
    function Page() {
        var headers = [];

        this.getHeaders = function () {
            for (var i = 0; i < headers.length; i++) {
                console.log(headers[i]);
            }
        };
        this.addHeader = function (name, id) {
            headers.push({ name: name, id: id });
        };
    }

    return Page;
})();

EDIT

The prototype stuff won't work since you're accessing a private member. You need to keep those functions inside, where they still have access to headers, or else make headers public. I have removed the prototype part of the answer.

Joe Enos
  • 39,478
  • 11
  • 80
  • 136
  • `this.getHeaders = function()` - assuming that replaces `function getHeaders()` in the code from the question, wouldn't that make `getHeaders` a method of the global object? – Paul D. Waite Jun 10 '13 at 14:41
  • Thank you very much. The getHeaders works now. I have trouble with addHeaders. Again I am getting the same error : p.addHeader(...) is not a function – monika Jun 10 '13 at 14:41
  • @PaulD.Waite The indentation was a little off in the question - `getHeaders` is inside the inner function, so it is in the right place. I've edited the indentation so it's easier to see. – Joe Enos Jun 10 '13 at 14:45
  • @JoeEnos: Perfect, thank you, you saved me good few hours. Upvoted and accepted. – monika Jun 10 '13 at 15:00
0

You want something like so:

//create a page object 'class'
function Page(){
  this.headers = [];          
};
//add functions to the page object
Page.prototype.addHeader = function(header){ this.headers.push(header); }
Page.prototype.getHeaders = function(){ return this.headers; }

function Header(opt){
  this.name = opt.name || ""; //default to empty string
  this.id = opt.id || null; //default to null id
}

//use it like so
Header header1 = new Header("title1","title1ID");
Page firstPage = new Page();
firstPage.addHeader( header1 );
dchhetri
  • 6,926
  • 4
  • 43
  • 56