How to pass sharepoint site name dynamically in below working code

Question

I am using below code in SharePoint online. Function loadcompanies takes one argument as projectName and that is used to perform filtering of a list column, it works fine. Currently I am hard-coding project name as loadcompanies('Starbucks') where Starbucks is project name.

I wrote another function retrivewebsite to read the current project name and I would like to pass the project name returned in title variable from onQuerySucceeded method and pass it to loadcompanies function so that way i do not have to hard code the value.

FYI, retrivewebsite function is working, tested using alert on one of the libraries. This should be a basic JS concept that I am lacking, please advise. Thanks in advance.

<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

  loadCompanies('Starbucks');

});

//Function to filter the values of Drink Types
function loadCompanies(projectName) {
    var masterListName = "Company Entity List";
    var listurl = "https://***.sharepoint.com";
    var masterListURL = listurl + "/_api/web/lists/getbytitle('" + masterListName + "')/items?$select=ID,Company,Company/Title,Company/Id&Expand=Company&$filter=Title eq '" + projectName + "'";
    getReqData(masterListURL, function (data) {
        var items = data.d.results;
        if (items.length > 0) {
        $(":input[title='Company']").children("option").hide();
            var optionsAsString = '<option value=""></option>';
            for (var i = 0; i < items.length; i++) {        
                optionsAsString += "<option value='" + items[i].id + "'>" + items[i].Company + "</option>";     
        $(":input[title='Company']").children("option[value='" + items[i].ID + "']").show();

            }            
        }
    },
        function (data) {
            alert("Some error occurred in retrieving companies");
        });
}

//function to read site name
function retrieveWebSite() {
   var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
   this.oWebsite = clientContext.get_web();
   clientContext.load(this.oWebsite);
   clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
   //alert('Title: ' + this.oWebsite.get_title());
    var title = this.oWebsite.get_title();//gives the current site name
    return title;

}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 
//JQuery AJAX to access REST API JSON data
function getReqData(reqUrl, success, failure) {
    $.ajax({
        url: reqUrl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}

</script>

Answer 1

Try this.

<script type="text/javascript">
    SP.SOD.executeOrDelayUntilScriptLoaded(Custom, 'SP.js');
    function Custom() {
        //loadCompanies('Starbucks');
        retrieveWebSite().done(function (title) {
            loadCompanies(title);
        })
    }

    //Function to filter the values of Drink Types
    function loadCompanies(projectName) {
        var masterListName = "Company Entity List";
        var listurl = "https://***.sharepoint.com";
        var masterListURL = listurl + "/_api/web/lists/getbytitle('" + masterListName + "')/items?$select=ID,Company,Company/Title,Company/Id&Expand=Company&$filter=Title eq '" + projectName + "'";
        getReqData(masterListURL, function (data) {
            var items = data.d.results;
            if (items.length > 0) {
                $(":input[title='Company']").children("option").hide();
                var optionsAsString = '<option value=""></option>';
                for (var i = 0; i < items.length; i++) {
                    optionsAsString += "<option value='" + items[i].id + "'>" + items[i].Company + "</option>";
                    $(":input[title='Company']").children("option[value='" + items[i].ID + "']").show();

                }
            }
        },
            function (data) {
                alert("Some error occurred in retrieving companies");
            });
    }

    //function to read site name
    function retrieveWebSite() {
        var deferred = $.Deferred();
        var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
        this.oWebsite = clientContext.get_web();
        clientContext.load(this.oWebsite);
        clientContext.executeQueryAsync(
           Function.createDelegate(this, function(sender, args) {
               //alert('Title: ' + this.oWebsite.get_title());
               var title = this.oWebsite.get_title();//gives the current site name
               //return title;
               deferred.resolve(title);

           }),
           Function.createDelegate(this, function (sender, args) {
               deferred.reject(sender, args);
           })
         );
        return deferred.promise();
    }

    //JQuery AJAX to access REST API JSON data
    function getReqData(reqUrl, success, failure) {
        $.ajax({
            url: reqUrl,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }

</script>