apo110cr33d apo110cr33d - 2 months ago 6
AngularJS Question

Error: message.$delete is not a function

I'm trying to send a DELETE request by using the angular-resource service, but I keep getting the following message in dev tools:


Error: message.$delete is not a function
$scope.deleteMessage@file:///Users/me/Desktop/angular/my-app/loyalty-program_messages-pointstransactions.js:37:13
anonymous/fn@file:///Users/me/Desktop/angular/my-app/angularjs/angular.js line 14605 > Function:2:329
expensiveCheckFn@file:///Users/me/Desktop/angular/my-app/angularjs/angular.js:15694:18
ngEventHandler/https://code.jquery.com/jquery-1.12.4.min.js:3:12392
n.event.add/r.handle@https://code.jquery.com/jquery-1.12.4.min.js:3:9156


I notice that the angular-resource is missing here. Is there a reason for this?

This is the module with the controller:

var myApp = angular.module('myApp', ['ngResource'])

.constant("baseUrl1", MY-TESTING-URL-1)
.config(function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
})

myApp.controller("MessagesCtrl", function($scope, $http, $resource, baseUrl1){


$scope.displayMode = "list";
$scope.currentMessages = null;

$scope.messagesResource = $resource(MY-TESTING-URL-1 + ":id?projection=full", { id: "@id" });

$scope.listMessages = function () {
$scope.foo = $scope.messagesResource.get();

$scope.foo.$promise.then(function (data) {

$scope.messages = [];
for(var i = 0; i < $scope.foo._embedded.messages.length; i++) {
var obj = $scope.foo._embedded.messages[i];
$scope.messages.push(obj);
}
});
}

$scope.deleteMessage = function (message) {
message.$delete().then(function () {
$scope.messages.splice($scope.messages.indexOf(message), 1);
});
$scope.displayMode = "list";
}

$scope.createMessage = function (message) {
new $scope.messagesResource(message).$save().then(function(newMessage) {
$scope.messages.push(newMessage);
$scope.displayMode = "list";
});
}

$scope.updateMessage = function (message) {
message.$save();
$scope.displayMode = "list";
}

$scope.editOrCreateMessage = function (message) {
$scope.currentMessage = message ? message : {};
$scope.displayMode = "edit";
}

$scope.saveEdit = function (message) {
if (angular.isDefined(message.id)) {
$scope.updateMessage(message);
} else {
$scope.createMessage(message);
}
}

$scope.cancelEdit = function () {
if ($scope.currentMessage && $scope.currentMessage.$get) {
$scope.currentMessage.$get();
}
$scope.currentMessage = {};
$scope.displayMode = "list";
}

$scope.listMessages();
});


This is the view with the ng-click that SHOULD send a DELETE request:

<div ng-repeat="message in messages">
<div class="data-tables read-{{ message.read }}">
<div class="data-tables-rows">
<div class="data-tables-toggle" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<label></label>
</div>
<div class="data-table-message hidden-xs" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p style="white-space: nowrap; width: inherit; overflow: hidden;text-overflow: ellipsis;"><b>message</b><br />
{{ message.message }}
</p>
</div>
<div class="data-table-date" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p><b>date</b><br />
<date>{{ message.dateReceived | date }}</date>
</p>
</div>
<div class="data-table-points hidden-xs points-{{ message.metadata }}" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p><b>Points</b><br />
{{ message.metadata }}</p>
</div>
<div class="data-table-delete">
<button ng-click="deleteMessage(message)">Delete</button>
</div>
</div>

<div class="collapse" id="collapse_disclaimer_data-table_message-center_{{ $index }}">
<div class="data-tables-rows">
<div class="data-tables-spacer" style="visibility:hidden;">
<input id="data-table-icon" type="checkbox" />
<label for="data-table-icon"></label>
</div>
<div class="well">
<div class="data-table-message">
<p><b>Message</b><br />
{{ message.message }}</p>
</div>
<div class="data-table-points visible-xs">
<p><b>Points</b><br />
{{ message.metadata }}</p>
</div>
</div>
<div class="data-tables-spacer">
</div>
</div>
</div>
</div>


The
message
comes from CDN served JSON:

{

"_embedded": {
"messages":
{
"id": 8,
"message": "You received points",
"dateReceived": "2016-08-01T00:00:00.000+0000",
"read": false,
"metadata": "50"
}
}
}


Firefox in debugger option 'Selection to watch expression' doesn't appear to reveal anything abnormal as the object data is listed. Please help!

Answer

Thank you Joaozito Polo, you helped us figure it out. var newMessage is the new object from resource. Here is the new listMessages function:

$scope.listMessages = function () {
        $scope.foo = $scope.messagesResource.get();
        $scope.foo.$promise.then(function (data) {
            $scope.messages = [];
            for(var i = 0; i < $scope.foo._embedded.messages.length; i++) {
                var obj = $scope.foo._embedded.messages[i];
                var newMessage = new $scope.messagesResource(obj)
            $scope.messages.push(newMessage);
            }
        });
    }
Comments