AngularJS Ng-Repeat не отображает данные в массиве

Question

Я создаю функцию, в которой я получаю документ из коллекции mongodb, затем я сохраняю эти данные в массиве и использую содержимое этого массива для отображения элементов в представлении.

Проблема заключается в том, что, хотя я вижу, что я получаю ответ с соответствующими данными, в представлении ничего не отображается.

сервер. js функция ...

app.get('/user/getFavourites', function (req, res) {

    User.find({ username: req.session.passport.user }, 'favourites', function (err, docs) {
        if (err) {
            res.status(400).send("Couldn't get favourites")
        } else {
            res.status(200).send(docs);
        }
    })
        .lean();
})

Функция dataService для получения избранного из возвращенного документа БД и сохранения его в клиентской части массива избранного.

angular.module('dataService', [])

  .factory('dataService', function ($http) {

    let selectedCocktailData = [];
    let cocktailIngredients = [];
    let toggleFavourite = false;
    let favourites = [];

    return ({

      selectedCocktailData: selectedCocktailData,

      cocktailIngredients: cocktailIngredients,

      toggleFavourite: toggleFavourite,

      favourites: favourites,

      addFavourite: function (cocktailName, cocktailImage) {

        $http.post('/user/addFavourite',
          { cocktailName: cocktailName, cocktailImage: cocktailImage })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (response) {
            console.log(response)
          })
      },

      getFavourites: function () {
        $http.get('/user/getFavourites')

          .then(function (response) {
            favourites = [...response.data[0].favourites];
            console.log(favourites);
          })

          .catch(function (response) {
            console.log(response);
          })
      }

    })


  })

Из консоли регистрируя переменную избранного, я вижу, правильно ли это обновление со всеми соответствующими данными из ответа на запрос на получение.

Тогда в моем избранном контроллере у меня есть это ...

  dataService.getFavourites();

   $scope.favouritesCollection = [...dataService.favourites];

   console.log($scope.favouritesCollection);

favouritesCollection остается пустым и не получает данные из службы.

Наконец, мой взгляд ...

    <div class="col-sm-5 col-lg-2 cocktailResultsContainer" ng-repeat="favourite in favouritesCollection">
        <a href="#!CocktailDetails" ng-click="selectedCocktail($index)">
            <h3 class="text-center cocktailHeader"><strong>{{favourite.cocktailName}}</strong></h3>
            <img ng-src="{{favourite.cocktailImage}}" alt="Cocktail image" class="cocktailImageSearchResult">
        </a>
    </div>

Что я делаю не так?

Должен ли я вызывать переменную избранного прямо из службы, поэтому в представлении dataService.favourites? Вместо того, чтобы назначить его переменной в контроллере избранного?

Почему переменная favouritesCollection в контроллере избранного не становится клоном переменной избранного в сервисе?

Спасибо

Answer 1

Вашему фабричному методу нужны операторы возврата.

 getFavourites: function () {
        return $http.get('/user/getFavourites')

      .then(function (response) {
        favourites = [...response.data[0].favourites];
         return favourites;
        console.log(favourites);
      })

      .catch(function (response) {
        console.log(response);
      })
  }