AngularJS Ng-Repeat not displaying data in array

Question

I'm building a function where I get a document back from a mongodb collection, I then store that data in an array and use the contents of that array to display elements on the view.

The issue is, whilst I can see that I'm getting a response with the relevant data, nothing is showing on the view.

server.js function...

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 function for getting the favourites from the returned db document and storing it in the favourites array client side.

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);
          })
      }

    })


  })

From console logging the favourites variable I can see if it is correctly updating with all of the relevant data from the response to the get request.

Then in my favourites controller I have this...

  dataService.getFavourites();

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

   console.log($scope.favouritesCollection);

favouritesCollection is staying empty and it's not picking up the data from the service.

Finally my view...

    <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>

What am I doing wrong?

Should I be calling the favourites variable directly from the service so in the view dataService.favourites? Instead of assigning it to a variable in the favourites controller?

Why is the favouritesCollection variable in the favourites controller not becoming a clone of the favourites variable in the service?

Thanks

tbone849 · Accepted Answer · 2020-05-02 22:23:52Z

1

Your factory method needs a return statements.

 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);
      })
  }

answered May 2, 2020 at 22:23

tbone849

9658 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Ng-Repeat not displaying data in array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related