ERROR data.call is not a function when loading data on AUI Select2 component with Ajax call

Jira Development Jira Server
, ,
1

I develop a custom plugin for Jira. In a Configuration page I want to display a list of user projects using aui-select2 component.

ajax url: http://localhost:2990/jira/rest/api/2/project
data response:

[
  {
    "expand": "description,lead,url,projectKeys",
    "self": "http://localhost:2990/jira/rest/api/2/project/10001",
    "id": "10001",
    "key": "LP",
    "name": "Test1 Project",
    "avatarUrls": {
      "48x48": "http://localhost:2990/jira/secure/projectavatar?avatarId=10324",
    },
    "projectTypeKey": "business"
  },
  {
    "expand": "description,lead,url,projectKeys",
    "self": "http://localhost:2990/jira/rest/api/2/project/10000",
    "id": "10000",
    "key": "WP",
    "name": "Test2 Project",
    "avatarUrls": {
      "48x48": "http://localhost:2990/jira/secure/projectavatar?avatarId=10324",
    },
    "projectTypeKey": "business"
  }
]

I want to display the project name as items for aui-select2 but the problem is that the component display a spinner that load forever without displaying project name.

I use the following soy template:

{namespace JIRA.Templates.IJP} 
{template .getProjects} 
<form class="aui" id="ijp-project-select-form"> 
    <div class="field-group">
        <label for="ijp-project-select">Projects</label>
        <div id="ijp-project-select"  
                 name="ijp-project-select"
                 class="ijp-aui-select"
                 placeholder="select a project">
        </div>
    </div>
    <div class="buttons-container">
        <div class="buttons">
            <input class="button submit" type="submit" 
                   id="ijp-project-select-save-button"
                   value="save"/>
        </div>
    </div>
</form>
{/template}

I use the following javascript:

var initGetProjects = function(restUrl) { 
    var templateProjectsSelection = JIRA.Templates.IJP.getProjects(); 
	var auiProjectSelectOptions = {
		ajax : {
			url : function() {
				return restUrl + '/project';
			},
			dataType : 'json',
			delay : 250,
			data:{
		        results:  function (data) {
		            return {
		                results: $.map(data, function (item) {
		                    return {
		                        text: item.name,
		                        id: item.id
		                    }
		                })
		            };
		        }
		    },
		    formatResult: function (item) { return item.name; },
                    formatSelection: function (item) { return item.name; },
		}
	};
	
	/* INIT TEMPLATES AND WIDGETS */
	AJS.$('#ijp-config-page-container').append(templateProjectsSelection); 
	AJS.$('#ijp-project-select').auiSelect2(auiProjectSelectOptions); 
	/*AJS.$('#ijp-project-select-form').submit(function (e) { 
	    e.preventDefault();
	    AJS.$(AJS.$('#ijp-project-select').select2('data')).each(function () { 
	        showSuccessFlag(this.id);
	    });
	});*/
};

AJS.toInit(function(){ 
	var baseUrl = AJS.params.baseURL; 
	var restUrl = baseUrl + '/rest/api/2';
	initGetProjects(restUrl); 
});

I have this error in console:

Uncaught TypeError: data.call is not a function
2

After some investigations, i find the solution:

var initGetProjects = function(restUrl) { 
    var templateProjectsSelection = JIRA.Templates.IJP.getProjects(); 
	var auiProjectSelectOptions = {
	    /*minimumInputLength: 3,*/
		minimumResultsForSearch: 30,
		placeholder: 'Select Project',
	    ajax: {
		  url : function() {
			return restUrl + '/project';
		  },
	      dataType: 'json',
	      delay: 250,
	      results: function (data, page) {
	        var more = (page * 30) < data.total;
	        return {results: data, more: more};
	      }
	    },
	    formatResult: function (item) { return item.name; },
        formatSelection: function (item) { return '<option value="'+ item.id +'">' + item.name + '</option>'; },
	    escapeMarkup: function (m) { return m; }
	};
	
	/* INIT TEMPLATES AND WIDGETS */
	AJS.$('#ijp-config-page-container').append(templateProjectsSelection); 
	AJS.$('#ijp-project-select').auiSelect2(auiProjectSelectOptions); 
};

AJS.toInit(function(){ 
	var baseUrl = AJS.params.baseURL; 
	var restUrl = baseUrl + '/rest/api/2';
	initGetProjects(restUrl); 
});