Enriching javascript objects contained in an angular promise with behavior/methods - angularjs

Question

I have the following angular service. It retrieves a array of json messages from the backend and I want to be able to convert those messages (plain js objects with no behavior) into object of type Message (see below).
Ideally I'd like to transform the data from the unresolved ng promise and passing each json message into the Message constructor as follows:
new Message(jsonMsg);
How can I achieve that?
Here is my service:
function Message(data) {
var defaults = {
sender: null,
recipient: null,
messageRead: false
};
angular.extend(this, defaults, data);
}
Message.prototype.getCounterparty = function (user) {
if (!this.sender) return null;
return (user.id !== this.sender.id) ? this.sender : this.recipient;
};
Message.prototype.isSender = function (user) {
return user.id === this.sender.id;
};
Message.prototype.isRecipient = function (user) {
return user.id === this.recipient.id;
};
...
findLatestsMessages: function (otherId) {
return $http.get('/api/message/find-latest-messages' + otherId);
}

Answer 1

You have to use a factory :
angular.factory('Message', [function() {
var Message= function(data) {
var defaults = {
sender: null,
recipient: null,
messageRead: false
};
angular.extend(this, defaults, data);
}
Message.prototype.isSender = function (user) {
return user.id === this.sender.id;
};
// ...
return Message;
}]);
Then you inject your factory in your controller
// ...
angular.controller('ctrl', ['$http', '$scope', 'Message', function($http, $scope, Message) {
$scope.messages = []
$scope.findLatestsMessages = function (otherId) {
return $http
.get('/api/message/find-latest-messages' + otherId)
.then(function(response) {
// and you create your messages when your promise has resolved
$scope.messages = response.data.map(function(m) {
return new Message(m);
}
});
}]);

Answer 2

// Assuming json response looks like
// [
// {sender: "John Doe", recipient: "Jane Doe", messageRead: true},
// {sender: "John Doe", recipient: "Jane Doe", messageRead: true}
// ]
findLatestsMessages: function (otherId) {
return $http
.get('/api/message/find-latest-messages' + otherId)
.then(function (response) {
var messages = response.data;
return messages.map(function (message) {
return new Message(message);
});
});
}
USAGE:
findLatestsMessages(someId).then(function (messages) {
// messages is an array of Message objects.
});

Answer 3

Then I will no longer have a promise to deal with on the calling-side?
You can return an object reference that later gets resolved to what you want. But beware, an XHR created by $http always resolves asynchronously, sometime after it is created.
As example:
function MessageResponseObject(url) {
var message = {};
var httpPromise = http.get(url);
//transform response
var derivedPromise = httpPromise.then( function(response) {
//save data to object
message.data = response.data;
//return message reference for chaining
return message;
});
//attach promise to object
message.$promise = derivedPromise;
//
return message;
});
$scope.message = MessageResponseObject(url);
You can use the response object in your template without a promise.
<div ng-repeat="item in message.data">
{{item}}
</div>
This will work in the UI because the AngularJS framework puts a $watchCollection on message.data. It checks the value after each digest cycle; and when the data gets resolved, it places the data on the DOM.
Clients in the controller that need to wait can use the attached promise.
$scope.message.$promise.then (function onFulfilledHandler(message) {
//do subsequent actions
}).catch (function onRejected(errorResponse) {
//do error actions
});
It is important to realize that using method immediately returns an empty reference. Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data. This means that in most cases one never has to write a callback function for the action methods.1
Best practice
Return the promise as a property of the object that resolves to the object. This makes it easy to use in resolve section of $routeProvider.when() to defer view rendering until the resource(s) are loaded.
For more information on this methodology, see AngularJS ngResource $resource API Reference.