trying to update a value using custom action in AngularJS $resource call

Question

I have been struggling to find a good way to perform put operation using angularJS $resource. I have get mapping which will return array of values in my webservice and also i have POST and PUT endpoints to perform Insert and update. I got query to work to get array of values and display on the page. now when i try to edit a value and call custom option 'update' that was created to perform PUT operation.

My Controller looks like

(function () {
'use strict';

var anErrorOccurred = 'An error has occurred.';
var noRecordsFound = 'No records were found.';

angular
    .module('customerContactInfo')
    .controller('customerContactInfoSearchController', ['$rootScope', '$scope',
        'customerContactInfoService', 'utilities',
        controllerFunc
    ]);


function controllerFunc(rootScope, scope,
    customerContactInfoService, utilities) {
    var self = this;
    this.fetchList = function () {
        customerContactInfoService.query(buildQueryObject(), function (data) {
            if (data.length === 0) {
                setPageMsg('infomsg', noRecordsFound);
            } else {
                setPageData(data, '');
            }
        }, function (response) {
            if (response.status === 404) {
                setPageMsg('errormsg', noRecordsFound);
            } else {
                setPageMsg('errormsg', anErrorOccurred);
            }
        });
    };

    function setPageData(data, message) {
        scope.customerContactInfoList = data;
        scope.error = message;
    }

    function setPageMsg(type, msg) {
        scope[type] = msg;
    }

    function buildQueryObject() {
        console.log(scope.accessToken);
        return {
            accessToken: scope.accessToken || rootScope.globalAngObj.customerSpaToken,
            userId: scope.userId || rootScope.globalAngObj.userId
        };
    }

    function buildQueryObjectForUpdate(customerIdUpdate, customerAddressNewValue) {
        return {
            accessToken: scope.accessToken || rootScope.globalAngObj.customerSpaToken,
            customerId: customerIdUpdate,
            customerMessageAddress: customerAddressNewValue
        };
    }

    function initPage() {
        scope.customerContactInfoList = undefined;
        scope.infomsg = undefined;
        scope.errormsg = undefined;
        scope.sortType = 'customerLastName'; // set the default sort type
        scope.sortReverse = false; // set the default sort order
        scope.searchCustomers = ''; // set the default search/filter term
    }

    function checkChildInit() {
        if (scope.$root.initChildApp) {
            self.fetchList();
        }
    }

    this.editDirectMsgAddress = function (customerContactInfo) {

        var note = customerContactInfoService.query(buildQueryObject());
        // Now call `update` to save the changes on the server
        note.$promise.then(function () {
            customerContactInfoService.$update(buildQueryObject(),
                buildQueryObjectForUpdate(customerContactInfo.customerId,
                    customerContactInfo.customerMessageAddress));
        });
    };

    initPage();
    checkChildInit();
}
})();

My service looks like:

(function () {
'use strict';

angular
    .module('customerContactInfo')
    .factory('customerContactInfoService', ['$resource', 'serviceResolver',
        customerContactInfoServiceFactory
    ]);

function customerContactInfoServiceFactory(resource, serviceResolver) {
    return resource(serviceResolver.customerContactInfoWebservice.endpoints.get +
        '/:userId/?access_token=:accessToken', {}, {
            query: {
                method: 'GET',
                isArray: true,
                timeout: 10000,
                withCredentials: true
            }
        }, {
            update: {
                method: 'PUT'
            }
        });
}
})();

My Html looks like:

<div class="app-table" ng-show="customerContactInfoList">
    <h5 class="information-text show-msg">Enter the customer messaging address to receive goods alerts for retail.
    </h5>
    <br>
    <div class="alert alert-danger error app-error-msg" role="alert" ng-class="{'show-msg':errormsg}" >{{errormsg}}</div>
    <div class="alert info app-info-msg" role="alert"  ng-class="{'show-msg':info}" >{{info}}</div>
    <div class="input-group">
        <label for="userId">Search Customer</label>
            <input type="text" placeholder="Search for Customer" ng-model="searchCustomers" ng-model-options="{debounce:250}">
    </div>
    <table class="tableone table table-hover">
            <thead>
                <tr>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerLastName'; sortReverse = !sortReverse">
                        customer Last Name
                          <span ng-show="sortType == 'customerLastName' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerLastName' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerFirstName'; sortReverse = !sortReverse">
                        customer First Name
                          <span ng-show="sortType == 'customerFirstName' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerFirstName' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerId'; sortReverse = !sortReverse">
                      customer ID
                          <span ng-show="sortType == 'customerId' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerId' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerMessageAddress'; sortReverse = !sortReverse">
                        customer Messaging Address
                                <span ng-show="sortType == 'customerMessageAddress' && !sortReverse"></span>
                                <span ng-show="sortType == 'customerMessageAddress' && sortReverse"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in customerContactInfoList | orderBy:sortType:sortReverse | filter:searchCustomers track by item.customerId">
                    <td class="last-name">{{item.customerLastName}}</td>
                    <td class="first-name">{{item.customerFirstName}}</td>
                    <td class="customer-id">{{item.customerId}}</td>
                    <td class="customer-msg-address">
                        <input class="customer-msg-address" size="320" type="text" ng-model=item.customerMessageAddress
                               ng-blur="customerContactInfoSearchController.editDirectMsgAddress(item)">
                      </input>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

My get url looks like

http://goods.nttf.com/customer-contact-info-ws/data/{userId}

My post and put url looks like

http://goods.nttf.com/customer-contact-info-ws/data/

It couldn't able to recognize update function in the resource.

appvendor.js:3 TypeError: e.$update is not a function at scripts.js:1 at i (appvendor.js:3) at appvendor.js:3 at n.$digest (appvendor.js:3) at n.$apply (appvendor.js:3) at g (appvendor.js:2) at r (appvendor.js:2) at XMLHttpRequest.w.onload (appvendor.js:2) "Possibly unhandled rejection: {}"

Answer 1

can you explain a little bit more ?

Just remember the approach with $resource :

var User = $resource('/user/:userId', {userId: '@id'});
User.get({userId: 123}).$promise.then(function(user) {
    user.abc = true;
    user.$save();
});

The action methods on the class object or instance object can be invoked with the following parameters:

"class" actions without a body: Resource.action([parameters], [success], [error])
"class" actions with a body: Resource.action([parameters], postData, [success], 
[error])
instance actions: instance.$action([parameters], [success], [error])

I know this is not the full solution, but may direct you. https://docs.angularjs.org/api/ngResource/service/$resource

Please let me know if I can help you further with more information