JavaScript CRUD operations in Provider Hosted Apps SharePoint Online

Question

I am new to Provider Hosted Apps and starting off with the basics.

Was able to save the data to the list, However facing challenges with edit, update and delete.

Scenario:

Created a simple form with the fields below:

The challenge here is that I'm unable to populate the ID column on the form load, However the field Team works as expected using SP.RequestExecutor.js

The ID dropdown is blank without any errors in the console.

Code inside document.ready():

$(document).ready(function () {
          
           hostweburl =
               decodeURIComponent(
                   getQueryStringParameter("SPHostUrl")
               );
           appweburl =
               decodeURIComponent(
                   getQueryStringParameter("SPAppWebUrl")
               );
           console.log(appweburl);

           var scriptbase = hostweburl + "/_layouts/15/";

           $.getScript(scriptbase + "SP.RequestExecutor.js", FilterTeam);

       });

Code for teams dropdown:

function FilterTeam() {

            var executor = new SP.RequestExecutor(appweburl);

            executor.executeAsync(
                {
                    url:
                        appweburl +
                        "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Team')/items?$select=Title,ID&@target='" +
                        encodeURIComponent(hostweburl) + "'",
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {

                        var jsonObject = JSON.parse(data.body);
                        var results = jsonObject.d.results;
                        console.log(results);

                        $.each(results, function (key, value) {

                            $("#team").append('<option value="' + value.ID + '">' + value.Title + '</option>');
                        });
                    },
                    error: function (error) {
                        alert(JSON.stringify(error));
                    }
                }
            );
        }

Code for ID Dropdown:

function getEmpID() {

                var executor = new SP.RequestExecutor(appweburl);

                executor.executeAsync(
                    {
                        url:
                            appweburl +
                            "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Employee')/items?$select=ID&@target='" +
                            encodeURIComponent(hostweburl) + "'",
                        method: "GET",
                        headers: { "Accept": "application/json; odata=verbose" },
                        success: function (data) {

                            var jsonObject = JSON.parse(data.body);
                            var results = jsonObject.d.results;
                            console.log(results);

                            $.each(results, function (key, value) {

                                $("#eid").append('<option value="' + value.ID + '">' + value.ID + '</option>');
                            });
                        },
                        error: function (error) {
                            alert(JSON.stringify(error));
                        }
                    }
                );

            }

If we call getEmpID() in document.ready() or use $.getScript(scriptbase + "SP.RequestExecutor.js", getEmpID), the ID Dropdown is empty.

Researched a lot on SP.RequestExecutor.js for code samples, However could not find any articles for this issue.

Update

Calling getEmpID , would give an error ReferenceError: SP is not defined and writing $.getScript(scriptbase + "SP.RequestExecutor.js", getEmpID); in document.ready works as expected , However the Team dropdown is blank

Would appreciate if anyone could help me with the correct way of doing this. Please let me know if any other details are needed.

Answer 1

Change your code like below & it should work for you:

$(document).ready(function () {          
  hostweburl =
      decodeURIComponent(
          getQueryStringParameter("SPHostUrl")
      );
  appweburl =
      decodeURIComponent(
          getQueryStringParameter("SPAppWebUrl")
      );
  console.log(appweburl);

  var scriptbase = hostweburl + "/_layouts/15/";

  $.getScript(scriptbase + "SP.RequestExecutor.js", executeAllFunctions);
});

function executeAllFunctions() {
  // Populate Team dropdown
  FilterTeam();

  // Populate Employee ID dropdown
  getEmpID();
}