Сортировка массива, являющегося результатом вызова $resource в AngularJS

Я пытаюсь получить результаты вызова API и сохранить их в $scope.segments, чтобы позже я мог отсортировать массив с помощью $scope.segments.sort()

Однако, поскольку $scope.segments = SegmentsService.getSegments(jobId); выполняет асинхронный вызов, $scope.segments является undefined, и сортировка никогда не работает.

Борется с этим весь день. Как я могу решить эту проблему?

Вот мой контроллер: 

angular.module('appApp')
  .controller('MainCtrl', function ($scope, $routeParams, $filter, JobsFactory, SegmentsFactory, SegmentsService) {

    var jobId = $routeParams.id;

    // gets the segments from the API
    $scope.segments = SegmentsService.getSegments(jobId);

    // returns 'undefined', because $resource has not populated the 'segments' array yet
    console.log($scope.segments);

    // returns "TypeError: Cannot read property 'sort' of undefined", because $scope.segment doesn't exist (yet)
    $scope.segments.sort(function(a, b) {
      return a.sequence - b.sequence;
    });

  });

Вот моя служба: 

angular.module('appApp')
  .service('SegmentsService', function (SegmentsFactory) {

    var segments = [];

    this.getSegments = function(jobId) {
      SegmentsFactory.query({ job_id: jobId }).$promise.then(function(data) {
        segments = data;
        return segments;
      }, function(err) {
        //fail
      });
    };

  });

И последнее, вот моя фабрика: 

angular.module('appApp')
  .factory('SegmentsFactory', function ($resource) {
    return $resource('http://localhost:3000/api/v1/segments/:id');
  });
1 2
javascript arrays angularjs angular-resource

1 ответ:

Вам нужно понять, как работают обещания:)

Я большой поклонник обещаний в AngularJS, объясненных как мультфильм , если на то пошло:)

Вот рабочий код для вашего варианта использования.

// service: return the promise
.service('SegmentService', function (...) {    
     this.getSegments = function(jobId) {
         return SegmentsFactory.query({ job_id: jobId }).$promise;
     };
});

// controller
.controller('MainCtrl', function (...) {
    SegmentsService.getSegments(jobId).then(function(segments) {
        segments.sort(function(a, b) { return ...; });
        $scope.segments = segments;
    });

});
0