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!

Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Mar 02 '18 at 23:38

score 1 · Accepted Answer · answered Mar 03 '18 at 00:45

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.

answered Mar 03 '18 at 00:45

Pytth

4,008
24
29

..and you are correct sir, the second console.log command runs before the first. I thought the act of pushing the results (scope.results.push) in the THEN part of the request would make the scope.results array global, but that doesn't seem to be the case. – Nick Mar 08 '18 at 17:34

AngularJS scope issue with $http

1 Answers1