Function in object is being declared as not a function

Question

so I have created a small table row generator from JSON. When I started building it I hadn't put it in an object and it worked absolutley fine.

After, I made it so it could be abstract and just needes parameters passed to it. Then I put it in an object so that I could easily re use it for other sets of data. However, after putting it in an object I get the console message:

TypeError: this.getTableRow is not a function

But... it is a function:

getTableRow: function(data) {
    row = "<tr>";

    for (i in data) {
        row += "<td>" + data[i] + "</td>";
    }

    row += "</tr>";

    return row;
}

Here is the full script so you have it in context:

var dataCollector = {

    baseDataURL: 'http://tourn.dev/data/',

    displayDataTable: function(dataPath, tableIdentifier, dataKeys, dataOpts) {

        $.getJSON(this.buildPath(dataPath, dataOpts), function (dataset) {
            for (k in dataset) {

                d = dataset[k];

                data = [];

                for (i in dataKeys) {
                    data[i] = d[dataKeys[i]];
                }
                ;

                $(tableIdentifier).append(this.getTableRow(data));
            }
        })
    },

    getDataURL: function() {
        return this.baseDataURL;
    },

    buildPath: function(dataPath, dataOpts) {
        path = this.getDataURL();

        if (dataPath != null) {
            path += dataPath;
        }

        if (dataOpts != null) {
            if (dataOpts.constructor === Array) {
                for (i in dataOpts) {
                    path += '/' + dataOpts[i];
                }
            } else {
                path += '/' + dataOpts;
            }
        }

        return path;
    },

    getTableRow: function(data) {
        row = "<tr>";

        for (i in data) {
            row += "<td>" + data[i] + "</td>";
        }

        row += "</tr>";

        return row;
    }
};

In this line: `$(tableIdentifier).append(this.getTableRow(data));` keyword `this` is not what you would expect. — Kuba Wyrostek, Apr 29 '15 at 13:57

score 3 · Accepted Answer · answered Apr 29 '15 at 13:58

this.getTableRow is not anything inside the getJSON context. Store this outside the call.

displayDataTable: function(dataPath, tableIdentifier, dataKeys, dataOpts) {
    var self = this; // store this
    $.getJSON(this.buildPath(dataPath, dataOpts), function (dataset) {
        for (k in dataset) {

            d = dataset[k];

            data = [];

            for (i in dataKeys) {
                data[i] = d[dataKeys[i]];
            }
            ;

            $(tableIdentifier).append(self.getTableRow(data)); //this in correct scope
        }
    })
}

More info about scope here: http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

score 2 · Answer 2 · edited May 23 '17 at 12:21

2

Inside the $.getJSON callback, this does not refer to dataCollector, but to the jqXHR object.

Please see How to access the correct `this` context inside a callback? for solutions.

Also related: $(this) inside of AJAX success not working

edited May 23 '17 at 12:21

Community

1
1

answered Apr 29 '15 at 13:56

Felix Kling

795,719
175
1,089
1,143

score 0 · Answer 3 · answered Apr 29 '15 at 13:58

It's because each function you create have different this context, if it's not an object then it's global window object, unless you have strict mode, try to use dataCollector isntead of this.

var dataCollector = {

    baseDataURL: 'http://tourn.dev/data/',

    displayDataTable: function(dataPath, tableIdentifier, dataKeys, dataOpts) {

        $.getJSON(this.buildPath(dataPath, dataOpts), function (dataset) {
            for (k in dataset) {

                d = dataset[k];

                data = [];

                for (i in dataKeys) {
                    data[i] = d[dataKeys[i]];
                }
                ;

                $(tableIdentifier).append(dataCollector.getTableRow(data));
            }
        })
    },

Function in object is being declared as not a function

3 Answers3