Creating a jQuery plugin with getJSON inside the function

Question

I am not sure if this is due to the fact that getJSON is asynchronous or not. I think that would be the most obvious reason, but I don't have a clear understanding of how that works. In my js file, I call the healthCheck method on the body element. Nothing happens. Is my getJSON callback function even getting called? I don't know.

I have uploaded the script on JSFiddle.

The code is also below:

var baseURL = "http://someURL";
var id = "00000001";
var key = "0000aaaa-aa00-00a0-a00a-0000000a0000";
var healthcheck = "/version/healthcheck?";

( function($) {
        $.fn.healthCheck = function() {
            var timestamp = new Date().toJSON().toString();
            var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id;
            var signature = CryptoJS.HmacSHA1(request, key);
            request = baseURL + request + "&signature=" + signature;
            $.getJSON(request, function(data) {
                var result = new Object();
                $.each(data, function(key, val) {
                    result.key = val;
                    if (val == false) {
                        this.innerHTML = "PTV API is currently not working. Error type: " + key + ".";
                    } else {
                        this.append(key + " working. <br />");
                    }
                });
            });
            return this;
        };
    }(jQuery));

Many thanks in advance. I hope my query is well placed. If anyone knows some good resources to get a better understanding of asynchronous methods in jQuery that would be greatly appreciated, also. I haven't found many that have been easy to follow yet.

Why create `result` if you are not going to use it for anything? Also, JSON is already a string; you do not have to call `.toString()` on it. Putting the variables at the top inside the anonymous function would probably be a good idea, as well (some other script may change the values inadvertently). — Sverri M. Olsen, Mar 01 '15 at 06:52

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Try 1) setting context of jQuery.ajax( url [, settings ] ) to this of $.fn.healthCheck ; 2) create reference to this object at $.each()

var baseURL = "http://someURL";
var id = "00000001";
var key = "0000aaaa-aa00-00a0-a00a-0000000a0000";
var healthcheck = "/version/healthcheck?";

(function($) {
        $.fn.healthCheck = function() {
            // set `this` object within  `$.getJSON`
            var timestamp = new Date().toJSON().toString();
            var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id;
            var signature = CryptoJS.HmacSHA1(request, key);
            request = baseURL + request + "&signature=" + signature;
            $.ajax({
              url:request
            , type:"GET"
            , contentType: false
            , context: this
            , processData:false
            }).then(function(data) {
                // reference to `this` within `$.each()`
                var that = this; 
                var result = new Object();
                $.each(JSON.parse(data), function(key, val) {
                    result.key = val;
                    if (val == false) {
                        // `that` : `this`
                        that.innerHTML = "PTV API is currently not working. Error type: " + key + ".";
                    } else {
                        that.append(key + " working. <br />");
                        console.log("complete"); // notification
                    }
                });
            }, function(jqxhr, textStatus, errorThrown) {
                 console.log(textStatus, errorThrown); // log errors
            });
            return this;
        };
    }(jQuery));

$("body").healthCheck();

See also How do I return the response from an asynchronous call?

var baseURL = "https://gist.githubusercontent.com/guest271314/23e61e522a14d45a35e1/raw/62775b7420f8df6b3d83244270d26495e40a1e9d/a.json";
var id = "00000001";
var key = "0000aaaa-aa00-00a0-a00a-0000000a0000";
var healthcheck = "/version/healthcheck?";

(function($) {
        $.fn.healthCheck = function() {
            var timestamp = new Date().toJSON().toString();
            var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id;
            var signature = 123;// CryptoJS.HmacSHA1(request, key);
            request = baseURL + request + "&signature=" + signature;
            $.ajax({
              url:request
            , type:"GET"
            , contentType: false
            , context: this
            , processData:false
            }).then(function(data) {
                var that = this;
                var result = new Object();
                $.each(JSON.parse(data), function(key, val) {
                    result.key = val;
                    if (val == false) {
                        that.innerHTML = "PTV API is currently not working. Error type: " + key + ".";
                    } else {
                        that.append(key + " working. <br />");
                        console.log("complete"); // notification
                    }
                });
            }, function(jqxhr, textStatus, errorThrown) {
                 console.log(textStatus, errorThrown); // log errors
            });
            return this;
        };
    }(jQuery));

$("body").healthCheck()

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

Can you explain why I need the line `var that = this;`? It only worked after I changed those lines. — SimpleProgrammer, Mar 01 '15 at 07:29
`this` inside of `$.each()` would refer to `data` object , not an DOM element where `.innerHTML` , `.append()` are called. — guest271314, Mar 01 '15 at 08:10

Creating a jQuery plugin with getJSON inside the function

1 Answers1