Search code examples
angularjsrestangularsteroids

Restangular data, getting into $scope for a list


Been wrestling with API stuff all day, and decided to use Restanglar. Really having issues getting the data out, and into $scope.

I understand that it won't just be the JSON that is returned from the API, and has a bunch of other internal methods etc. But when I get the data out, I can see it buried somewhere in the debugging with console.log, but I can't seem to get it into $scope to use it in my view which was working fine previously.

How can I get that data out into my $scope, and therefore my view?

Model

angular.module('horse', ['restangular'])
    .config(function(RestangularProvider) {
        RestangularProvider.setBaseUrl('http://url/api');

        RestangularProvider.setResponseInterceptor(
          function(data, operation, what) {
            if (operation == 'getList') {
              return data[what];
            }
            return data;
        });
});

Controller

angular
  .module('horse')
  .controller("IndexController", function ($scope, Restangular) {
    $scope.horse = null;
    $scope.showSpinner = true;

    Restangular.all('horse').getList().then(function(horse) {
        $scope.horse = horse;
        console.log($scope.horse);
    });
});

API response

{"error":false,"horse":[{"id":"1","name":"horse 2"},{"id":"2","name":"horse 2"}]}

Edit 1

Restangular response

[Object, Object, route: "horse", getRestangularUrl: function, getRequestedUrl: function, addRestangularMethod: function, clone: function…]

Restangular expanded console.log output

Edit 2

I have also tried this - https://github.com/mgonto/restangular#using-values-directly-in-templates

$scope.horse = Restangular.all('horse').getList().$object;

Which just results in an empty array being output. I have also tried removing the setResponseInterceptor and modifying the structure of the api to result the data array directly without the meta stuff (error, etc), no joy :(


Solution

  • The data seems to be coming through. I notice you're using Steroids, have you checked the markup and not just the console?

    Make sure you set the scope spinner to false, to ensure that the spinner is hidden when the data comes through.

    $scope.ShowSpinner = false;