AngularJS scope issue with $http

Question

Continuing my adventures with AngularJS, I have what I believe is a scope issue, but not entirely sure.

In my controller I'm building two test array's for demo purposes, search.filterDemo and search.filter (real data).

Controller

 app.controller('searchBtnCtrl', ['$scope', '$http', function ($scope, $http) {
var search = this;

            search.filter = {};
            search.results = [];
            search.resultsDemo = [];
            search.keywordsToFilter = [
                { name: 'itemA' },
                { name: 'itemB' },
                { name: 'itemC' },
                { name: 'itemD' }
            ];

$scope.performSearch = function () {
                search.resultsDemo = [
                    { name: 'itemA', content: 'This is demo content' },
                    { name: 'itemB', content: 'This is demo content' },
                    { name: 'itemC', content: 'This is demo content' },
                    { name: 'itemD', content: 'This is demo content' }
                ];

$http.get('http://localhost/content').then(function (response) {
     search.resultCount = response.data.response.docs.length;

     for (var i = 0; i < search.resultCount; i++) {
         search.results.push({ name: search.results[i]._name[0], content: search.resultsTemp[i]._content[0]});
     }

     console.log(search.results);
  });

  console.log(search.resultsDemo);
  console.log(search.results);
}
}]);

Output from the console log for search.resultsDemo is as I expect it to be:

Array [ Object, Object, Object, Object, Object, Object, Object, Object ]

Then if I click on the Array link I see that the array has 8 items

Array[8]

This is all correct to me, my first array is keeping it's scope.

However my second array is not quite.

Output from the second array is as follows: Inside the $http call it displays properly -

Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 3 more… ]

However the second console.log of the array just 3 lines later displays as:

Array[ ] 

And if I click on the array link it shows:

Array[0]

The interesting thing is that the data is in there, it's just not showing up as objects like the first array (I can click the array link and I do see the objects listed under the Array[0] in the console, and I can twirl them open to see the data.

So is this a scope issue, or is it something else related to the async nature of Angular that's not formatting my second (real) array correctly?

It's driving me batty, as I need to have my second array formatted properly like the first array for processing later in the function.

thanks!

Answer 1

That is because your second console.log is outside the scope of your then statement. When your second console.log runs, the data likely has not been returned yet.

In fact, I would wager to say that your second console.log(search.results) likely ends up in your console before your first console.log(search.results) does.