AngularJs : Restangular

Question

I have just discovered the Angular "Restangular" library, and oh my it does look great! However, I am running into complications when performing some simple GET requests with it. I am just experimenting and attempting to return a list of JSON objects from one of my API routes. The GET request to the server is being made successfully, however when I attempt to bind the results to the $scope object and display them, I cannot seem to get it working. Please refer to my controller script where I initialise and use the getList() method to retrieve the list of objects.

angular.module("app")
    .controller("BlogsController", function ($scope, $location, Restangular) {
    var Blogs = Restangular.all("blogs");
    $scope.list = function () {
        $scope.blogs = Blogs.getList("blogs");
    }

I have bind initialised the "list()" function on the HTML page, and am using the ng-repeat directive to loop through all the JSON objects. This is my HTML markup below:

<tr data-ng-repeat="blog in blogs">
    <td>{{blog.title}}</td>
    <td>{{blog.category}}</td>
    <td>{{blog.author}}</td>
    <td>{{blog.content}}</td>
    <td>{{blog.createdOn}}</td>
</tr>

I am very new to the AngularJs framework, and would like to know if anyone knows the potential problem that I am being faced with. Please comment and let me know what needs to be fixed. All answers will be greatly appreciated, Thanks.

Mikke · Accepted Answer · 2014-03-22 23:28:58Z

3

You have to use the $object property of the promise which getList() returns. This is where the values from the HTTP response will be filled in when the promise is resolved.

$scope.blogs = Blogs.getList("blogs").$object;

Another, more explicit and less "magical" way of fetching the values is to attach callbacks to the promise returned by getList(), which will be called when the promise is resolved:

Blogs.getList("blogs").then(function(blogs) {
    // Success callback
    $scope.blogs = blogs;
}, function(error) {
    // Error callback
    console.log("we had an error here ...");
});

edited Mar 22, 2014 at 23:28

answered Mar 22, 2014 at 15:06

Mikke

2,17717 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Maff Over a year ago

Thanks Mikke! By applying the $object property I have managed to get this working. I am curious to know whether this is the correct way to implement this, or whether there is a proper way of executing what I am trying to do. Please let me know any comments you have.

Mikke Over a year ago

Yes, this is the "proper" way to do to this, and it is a feature of Restangular, mentioned in the documentation under "Using values directly in templates". The technique is called "promise unwrapping", and was previously also a feature of Angular, removed for various reasons. A disadvantage of this approach is that it doesn't encourage proper error handling -- it's hard to detect if anything went wrong. I suspect this is one of the reasons why Angular chose to remove it. If you're not using promise unwrapping, you typically use different callbacks for the "success" and "error" situations.

Maff Over a year ago

Great explanation, makes sense to me now. Is there a way for checking errors in the "promise unwrapping" technique? I suspect that you could use the 'then' method passing in a callback function to check for errors?

Mikke Over a year ago

When using (only) promise unwrapping, you won't know if the request failed or if it just hasn't returned yet. So if you want that, it's probably better to go for callbacks (see updated example). Think of promise unwrapping as an "optimistic" approach (handy and works most of the time, but somewhat unreliable) :)

Maff Over a year ago

Beautiful! Thank you very much for your help. Great explanations, I have implemented the following and all works well.

Poyraz Yilmaz · Accepted Answer · 2014-03-22 23:30:50Z

0

var Blogs = Restangular.all("blogs").getList();

this is your promise, you have to resolve it with then() like this

Blogs.then(function(blogs){
   $scope.blogs = blogs;
});

edited Mar 22, 2014 at 23:30

answered Mar 22, 2014 at 17:32

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

3 Comments

Maff Over a year ago

Whenever I try implement the "then" method to resolve the promise, I receive and error stating: "TypeError: Object [object Array] has no method 'then'". However, when I have attached the $object property onto the Blogs.getList() function, it works accordingly and displays the list of blogs. Working method: Blogs.getList().$object;

Mikke Over a year ago

all() does not return a promise, getList() and get() do. Attaching a callback to the promise is one way of solving the problem, but it seems the question is about using promise unwrapping, which can be useful and convenient. Refer to Restangular's documentation, see e.g. the "Let's Code" section.

Maff Over a year ago

@wickY26, Yep I tested it myself, it works with the following: Blogs.getList().then(function(blogs) { $scope.blogs = blogs; })

Collectives™ on Stack Overflow

AngularJs : Restangular

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related