Not possible to add item to array

Question

I'm trying to add items to array but I can't seem to achieve it. If I don't include "this.results.push(res)" the results are shown in my html page, but if include it nothing happens! Can you help please?

This is the current code that I have:

var results = [];

var fun1 = function(str1) {

    var imag = new Image;
    var starttimer = new Date().getTime();


    $(imag).attr('src', str1 + ':8886/').error(function () {
        var endtimer = new Date().getTime();
        res = (endtimer - starttimer);
        this.results.push(res);
        $('#results').html("" + res + "ms");
    });
}

As with most jQuery methods that accept a callback, inside the callback, `this` refers to the selected DOM element. And image elements don't have a property `results`. — Felix Kling, Feb 16 '14 at 10:36
Also take a look at [this question](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call), I think it may apply here — elclanrs, Feb 16 '14 at 10:37

score 2 · Answer 1 · answered Feb 16 '14 at 10:35

2

You need to change:

this.results.push(res);

to:

results.push(res);

answered Feb 16 '14 at 10:35

Felix

37,892
8
43
55

score 1 · Accepted Answer · edited May 23 '17 at 12:29

The reason why you have to use 'results.push(res)' instead of 'this.results.push(res)' is that the context of 'this' has changed and it doesn't point to the global context any more (under which results array is defined). Instead this points to the image element that triggered error event. Also please note that 'this' context of the 'fun1' will depend on the calling object. If it is called in global scope then 'this.results' will be defined, otherwise it will be undefined (in scope of the fun1). In addition, this also depends on the fact if function is defined in 'strict' or 'non-strict' mode.

Let say that you have three different image elements and the same error event handler in all functions 'this' will be different in all of them. Actually in every function 'this' will correspond to the DOM element that triggered error event (image1, image2 or image3), as Felix Kling already wrote under comments.

Also, I would like to point out that you could actually have a valid error event handler function in which 'this.results' would work. To accomplish this you will have to call your error event handler function using 'call', 'apply' or 'bind' methods which allow you to change context of this inside of the function.

You could say:

// define your onError event handler
var onError = function () {
    var endtimer = new Date().getTime();
    res = (endtimer - starttimer);
    this.results.push(res);
    $('#results').html("" + res + "ms");
};

// now call it this way
$(imag).attr('src', str1 + ':8886/').error(onError.bind(this));

Of course, this way using 'this' you could not access your image properties as context of this has changed (in your example you are not using image properties, so no harm here).

To better understand javascript global and function context read more on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this.

Hope this helps.

score 0 · Answer 3 · answered Feb 16 '14 at 11:23

when you include this.results.push(res); in your code browser halts on that line and do not continue to execute followed strings. this.results is undefined in that callback function (check the status bar of your browser for exception notifications). When you are removing that line, everything gows fine and $('#results').html("" + res + "ms"); command shows data in your html.

Use results.push(res); instead of this.results.push(res); because results variable is global and accessible for callback function.

Not possible to add item to array

3 Answers3