Using 'this' in a Javascript Object

Question

Having some trouble getting 'this' to behave as I would expect it -

Basically, I have an object, and I am unable to access an array in the object from a function within the same object -

It looks like this:

var articles = {
    article : {
        1: {
            title : 'This is a Title',
            content : 'This is the content of the article'
        },
        2: {
            title : 'This is the second article',
            content : 'This is the second article content'   
        },
        3: {
            title : 'This is the third article',
            content : 'Making information transferrable. Identifiable. Manipulatable.'   
        }
    },
    numArticles : function(){
        var size = 0, key;
        for (key in this.article){
            if(this.article.hasOwnProperty(key)) size++;               
        }
        return size;
    },
    buildInterface : function(){
        var aSize = this.numArticles();
        for(var i = 0; i < aSize; i++){
            $('body').append('<article><h2>' + this.article[i].title + '</h2></article>');               
        }
    }
}

the buildInterface() function is not able to access the 'article' array in this scenario.

Here is an example of this in progress:

http://jsfiddle.net/merk/xV2n6/41/

Any help here would be appreciated -

I have a hunch it may be a scoping issue - hopefully it is not something related to JSFiddle -

Thanks a ton -

Peace

Mark

@Pointy: I think that idiot meant "I don't see an array" :p j/k — jAndy
– jAndy, Commented Nov 24, 2012 at 19:46
@thatidiotguy: haha yea, I was just making fun out of it, looked pretty much just like a typo — jAndy
– jAndy, Commented Nov 24, 2012 at 19:48
Also, since you're treating article as an array, why not make it an actual array? You'd get length for free, so you wouldn't need numArticles. — beatgammit
– beatgammit, Commented Nov 24, 2012 at 19:51

raina77ow · Accepted Answer · 2012-11-24 20:05:38Z

3

You have inconsistent indexing for your article variable: properties are defined beginning from 1, yet you start from 0 in buildArticles method for loop. You can fix this with...

for(var i = 1; i <= aSize; i++){
  $('body').append('<article><h2>' + this.article[i].title + '</h2></article>');               
};

... or (and that's much better for my taste, as you're basically trying to use Object for the Array's work) rewrite the article definition into a proper Array:

article : [{
        title : 'This is a Title',
        content : 'This is the content of the article'
    }, {
    title : 'This is the second article',
    content : 'This is the second article content'   
    }, {
    title : 'This is the third article',
    content : 'Making information transferrable. Identifiable. Manipulatable.'   
    }],
...

... leaving your buildArticles for loop as it is now (as indexing now properly starts from 0).

BTW, this way you don't even have to make a special function to count your articles: article.length would be quite enough.

Here's JS Fiddle with this approach's illustration.

As a sidenote, if you had actually checked the debugger, you would have noticed that it's this.articles[0] that is undefined (so trying to take title out of it is wrong), and not this.articles. Hence it's definitely not a question of scope.

edited Nov 24, 2012 at 20:05

answered Nov 24, 2012 at 19:49

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Reale Over a year ago

Great suggestion on the proper Array tip - definitely gonna switch up to that -

Salvador Dali · Accepted Answer · 2012-11-24 19:53:45Z

This should work:

var articles = {
    article : {
        1: {
            title : 'This is a Title',
            content : 'This is the content of the article'
        },
        2: {
        title : 'This is the second article',
        content : 'This is the second article content'   
        },
        3: {
        title : 'This is the third article',
        content : 'Making information transferrable. Identifiable. Manipulatable.'   
        }
    },
    numArticles : function(){
        var size = 0, key;
        for (key in this.article){
            if(this.article.hasOwnProperty(key)) size++;               
        }
        return size;
    },
    buildInterface : function(){
        var aSize = this.numArticles();
        for(var i = 1; i <= aSize; i++){
            console.log( '<article><h2>' + this.article[i]['title'] + '</h2></article>');               
        };
    }
}

The problem in your case, that you had started with the element on the zero position in your array. But you have no 0 element. So it will give you an error. And this is working as expected.

Collectives™ on Stack Overflow

Using 'this' in a Javascript Object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related