Step 3: Display data

define("_ujgCompletedIssues", [ "jquery" ], function($) {
  var MyGadget = function(API) {
    var $msgDiv = $('<div style="padding:10px;"></div>'); // want some padding
    API.getGadgetContentEl().append($msgDiv);
    // function to call from success ajax callbacks
    var showInfo = function(completed, total) {
      if (completed !== undefined && total !== undefined) { // only if 2 vars are defined
        $msgDiv.append('<h2>Completed ' + completed + " from " + total + " issues.</h2>");
        API.resize();
      }
    };
    // function for error displaying
    var showError = function(url) {
      AJS.messages['error']($msgDiv, {
        title : 'Error!',
        body : 'Failed to retrieve data for URL: ' + url
      });
      API.resize();
    };
    var url, completed, total; // initially are undefined
    url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()%20and%20status%20in(Done)&fields=id';
    // make a call for number of completed issues
    // $.ajax({ // for Server
    AP.request({ // for Cloud
      url : url,
      success : function(data) {
        // completed = data.total; // for Server
        completed = $.parseJSON(data).total; // for Cloud
        showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about thier completion order
      },
      error : function(data) {
        showError(url);
      }
    });
    url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()&fields=id';
    // $.ajax({ // for Server
    AP.request({ // for Cloud
      url : url,
      success : function(data) {
        // total = data.total; // for Server
        total = $.parseJSON(data).total; // for Cloud
        showInfo(completed, total); // call it 2 times since ajax methods are asynchronous and we are not sure about thier completion order
      },
      error : function(data) {
        showError(url);
      }
    });
  };
  return MyGadget;
});