3

This is a sharepoint hosted app where I am trying to use the Sharepoint Request Executor to make a REST API Call to the host web to get list items.

The code is however failing on the file: datacontext.angular.js on the line:

 var executor = new SP.RequestExecutor(spContext.hostWeb.appWebUrl);

When I check the debugger it looks like SP does not have a RequestExecutor constructor.

Screenshot: http://screencast.com/t/EWasAvaDKaHs

The relevant code is as follows:

fases.js

(function () {
    'use strict';

    // define controller
    var controllerId = "fases";
    angular.module('app').controller(controllerId,
      ['$location', '$routeParams', 'common', 'datacontext', 'spContext' , fases]);

    // create controller
    function fases($location, $routeParams, common, datacontext, spContext) {
        var vm = this;

        // navigate to the specified item
        vm.gotoItem = gotoItem;
        // build link to create new learning items
        vm.newfaseItemUrl = newfaseItemUrl;

        // init controller
        init();

        // load all learning items
        getFases();

        function newfaseItemUrl() {
            var faseId = +$routeParams.learningPathId || 0;

            if (faseId && faseId > 0) {
                return '#/Fases/' + faseId + '/Items/new';
            } else {
                return '#/Fases/new';
            }
        }

        // navigate to the specified item
        function gotoItem(faseItem) {
            if (faseItem && faseItem.Id) {
                $location.path('/Fases/' + faseItem.Id);
            }
        }

        // #region private memebers
        // init controller
        function init() {
            common.logger.log("controller loaded", null, controllerId);
            common.activateController([], controllerId);
        }

        // gets all learning items as partials (filtered if specified)
        function getFases() {
            // get the fase  to filter on
            // if not specified, this comes back as NaN which is 
            // dealt with in the datacontext
            var faseId = +$routeParams.faseId;

            var scriptbase = spContext.hostWeb.url + '/_layouts/15/';
            $.getScript(scriptbase + 'SP.Runtime.js',
               function () {
                   $.getScript(scriptbase + 'SP.js',
                       function () { $.getScript(scriptbase + 'SP.RequestExecutor.js', datacontext.getFasesPartials(faseId)); }
                   );
               }
           );

            datacontext.getFasesPartials(faseId)
              .then(function (data) {
                  if (data) {
                      vm.fases = data;
                  } else {
                      throw new Error('Error al obtener los datos');
                  }
              }).catch(function (error) {
                  common.logger.logError('Error al obtener las fases', error, controllerId);
              });
        }
    };

})();

datacontext.angular.js

/*
 * datacontext that uses the Anuglar $http service
 */

(function () {
  'use strict';

  // define factory
  var serviceId = 'datacontext';
  angular.module('app').factory(serviceId,
    ['$rootScope', '$http', '$resource', '$q', 'config', 'common', 'spContext', datacontext]);

  function datacontext($rootScope, $http, $resource, $q, config, common, spContext) {
    // init factory
    init();

    // service public signature
    return {
        //Get all items on the Fases list
        getFasesPartials: getFasesPartials,

    };

    // init service
    function init() {
      common.logger.log("service loaded", null, serviceId);
    }

    // retrieve all learning paths, usingngHttp service
    function getFasesPartials() {
      var deferred = $q.defer();

      // executor: The RequestExecutor object
      // Initialize the RequestExecutor with the app web URL.
      var executor = new SP.RequestExecutor(spContext.hostWeb.appWebUrl);

      // Issue the call against the app web.
      // To get the title using REST we can hit the endpoint:
        //       appweburl / _api / web / lists / getbytitle('listname') / items
      // The response formats the data in the JSON format.
      // The functions successHandler and errorHandler attend the
      // sucess and error events respectively.
      executor.executeAsync(
          {
              url: spContext.hostWeb.appWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('FasesPrueba')/items?@target='" + spContext.hostWeb.url ,
              method: "GET",
              headers: { "Accept": "application/json; odata=verbose" },
              success: successHandler,
              error: errorHandler
          }
      );

      // Function to handle the success event.
      // Prints the data to the page.
      function successHandler(data) {
          var jsonObject = JSON.parse(data.body);
          deferred.resolve(jsonObject.d.results);
      }

      // Function to handle the error event.
      // Prints the error message to the page.
      function errorHandler(data, errorCode, errorMessage) {
          var message = "data context ngHttp error: " + error.message;
          common.logger.logError(message, error, serviceId);
          deferred.reject(error);
      }

      return deferred.promise;
    }

  }
})();

1 Answer 1

5

You should reference the SP.RequestExecutor.js before the angular.js reference.

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.