AngularJS resource service

186 views Asked by At

I’m new to AngularJS and are trying to use resource service to get data back from a REST service. My problem is that when I’m trying to get my items from two different SharePoint list it only takes the first two fields of items. If I but $select=’*’ (suppose to get all items from the list) it only takes the first two columns (there is three in the first list and seven in the second one). This is my code:

model for categories.js

var spa = spa || {};
spa.models = spa.models || {};

spa.models.categories = function () {
    this.Title = undefined;
    this.CategoryID = undefined;
    this.Description = undefined;
    this.__metadata = {
         type: 'SP.Data.CategoriesListItem'
    };
};

model for products.js

var spa = spa || {};
spa.models = spa.models || {};

spa.models.products = function () {
    this.ID = undefined;
    this.Title = undefined;
    this.ProductID = undefined;
    this.Category = undefined;
    this.Price = undefined;
    this.AlcoholStrength = undefined;
    this.Content = undefined;

    this.__metadata = {
        type: 'SP.Data.ProductsListItem'
    };
};

datacontext.angular.js

(function () {
    'use strict';

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

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


    // Init service
    init();

    // Service signature
    return {
        getCategoriesPartials: getCategoriesPartials,
        getProductsPartials: getProductsPartials

    };

    function init() {
        common.logger.log("Service Loaded", null, serviceId);
    }

    function getCategoriesResource() {
        return $resource('_api/web/lists/getbytitle(\'Categories\')/items',
            {},  
            {
                get: {
                    method: 'GET',
                    params: {
                        '$select': '*'
                    },
                    headers: {
                        'Accept': 'application/json;odata=verbose'
                    }
                }
            });     
    }

    function getProductsResource() {
        return $resource('_api/Web/Lists/GetByTitle(\'Products
                      \')/Items?$top=10',
            {},
            {
                get: {
                    method: 'GET',
                    params: {
                        '$select': '*'

                    },
                    headers: {
                        'Accept': 'application/json;odata=verbose'
                    }
                }
            });  
    }

    function getCategoriesPartials() {
        var resource = getCategoriesResource();
        var deferred = $q.defer();

        resource.get({}, function (data) {
            deferred.resolve(data.d.results);
            common.logger.log("Retrived Categories partials", data, 
                   serviceId);
        }, function (error) {
            deferred.reject(error);
            common.logger.logError("Error when retrieved categories  
                   partials", error, serviceId);
            });
        return deferred.promise;

    }

    function getProductsPartials() {
        var resource = getProductsResource();
        var deferred = $q.defer();

        resource.get({}, function (data) {
            deferred.resolve(data.d.results);
            common.logger.log("Retrived Products partials", data, 
                   serviceId);
        }, function (error) {
            deferred.reject(error);
            common.logger.logError("Error retrieved Products partials",
                  error, serviceId);
        });
        return deferred.promise;
    }

}

})();

app.js

(function () {
    'use strict';

    // create app
    var app = angular.module('app', [
       // ootb angular modules
      'ngRoute',      
      'ngCookies',    
      'ngSanitize',      
      'ngAnimate',    
      'ngResource',


    // my custom modules
    'common'
]);

   // startup code
  app.run(['$route', 'angular.config', function ($route, angularConfig) {
  }]);
})();

Categories.js

(function () {
   'use strict';

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

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


     // init controller
     init();

     getCategories();



    // init controller
    function init() {
        common.logger.log("Controller Loaded", null, controllerId);
        common.activateController([], controllerId);        
    }

    function getCategories() {
        common.logger.log("In GetCategories", null, controllerId);
        datacontext.getCategoriesPartials()
            .then(function (data) {
                if (data) {
                    vm.categories = data;
                    common.logger.log("vm.categories Check", null,
                          controllerId);
                } else {
                    throw new Error('Error obtaining data in 
                          categories.js');
                }
            }).catch(function (error) {
                common.logger.logError('Error obatining categories items', 
                      error, controllerId);
            });
       }


    }

})();

Please help me! Everything works great if I have $select=’Title,CategoryID’ only in datacontext.angular.js. But when I add Description ($select=’Title,CategoryID,Description’) the program goes directly in to the common.logger.logError(“Error when retrieved categories partials”).

What am I doing wrong??

Thanks

0

There are 0 answers