Converting $http.get to Restangular

Question

Alrighty, for an internship project I am trying to create a simple client for a REST API. The current client is using regular angularJS, but I need to use Restangular for this.

I have been searching around a lot, trying out a lot of things, but nothing quite helped me do what I want, or understand what needs to happen.

This is the code snippet that needs to turn into Restangular

$http.get('/rest/programarticle/', {
  'format': 'json'
}).success(function(data, status, headers, config) {
  $scope.articles = angular.articles = data.results;
});

This picks up JSON data which contains some meta data, aswell as an array (results):

{
    "count": 3,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 100,
            "catalog": 7,
            "catalog_alias": "placeHolder",
            "program": 7,
            "name": "placeHolder"
        },
        {
            "id": 92,
            "catalog": 6,
            "catalog_alias": "placeHolder",
            "program": 6,
            "name": "placeHolder"
        },
        {
            "id": 84,
            "catalog": 5,
            "catalog_alias": "string",
            "program": 5,
            "name": "placeHolder"
        }
    ]
}

I have my baseUrl configured correctly, and I tried this out:

var testArticles = Restangular.all('programarticle').getList();
console.log(testArticles);

Using the following ResponseInterceptor:

RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
    var extractedData;
    if (operation === "getList") {
        extractedData = data.results;
        extractedData.count = data.count;
        extractedData.next = data.next;
        extractedData.previous = data.previous;
    } else {
        extractedData = data.data;
    }
    return extractedData;
});

But this still results in something I can't work with in the console:

Promise {$$state: Object, restangularCollection: true, $object: Array[0]}

Which when opened shows the following:

$$state: Object
$object: Array[7]
call: wrapper()
get: wrapper()
push: wrapper()
restangularCollection: true
__proto__: Promise

It does show an array($object), but I cannot reach it using

console.log(testArticles.$object);

Should I be using .get() instead of getList()? If so, how do I use this correctly?

Thank you for your time and please suggest, I am still a beginner.

Have you configured Restangular to add the /rest base to the API calls? Why is the data returned from the interceptor not something you can work with? What data are you seeing instead of the expected data? — Ezequiel Muns
– Ezequiel Muns, Commented Mar 7, 2016 at 12:45
@EzequielMuns Yes I have the base url configured, I will edit my post shortly so it contains the things you just called :) — Too many trick pony
– Too many trick pony, Commented Mar 7, 2016 at 12:50

Ezequiel Muns · Accepted Answer · 2016-03-07 13:10:01Z

1

What the get/getList functions from restangular return are actually Promises, not the JSON objects retrieved themselves. Promises are a way of abstracting an asynchronous call with a more manageable interface. They stand for an expected future result.

What you need to know is that to get the actual result of the Promise, you must add a callback using the then function, like so:

Restangular.all('programarticle').getList().then(function (articles) {
    $scope.articles = articles;
});

3 Comments

Too many trick pony Over a year ago

Thanks! This already returns something more useful to the console. I had a read on the article, but as the scrub I am I stil don't exactly know how to use this promise and the data in it. Could I ng-repeat for article in articles now? Or do I need something else?

Ezequiel Muns Over a year ago

Should be able to ng-repeat on the returned articles array.

Too many trick pony Over a year ago

Thank you dearly good sir! I should now be able to finally get going.

Collectives™ on Stack Overflow

Converting $http.get to Restangular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related