$ http

时间:2018-03-02 23:35:24

标签: arrays angularjs angularjs-scope angular-directive

继续我对AngularJS的冒险,我认为这是一个范围问题,但并不完全确定。

在我的控制器中,我为了演示目的构建了两个测试阵列,search.filterDemo和search.filter(真实数据)。

控制器

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

来自search.resultsDemo的控制台日志的输出正如我所期望的那样:

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

然后,如果我点击Array链接,我会看到该数组有8个项目

Array[8]

这对我来说都是正确的,我的第一个阵列是保持它的范围。

然而我的第二个阵列并不完全。

第二个数组的输出如下: 在$ http调用内部显示正确 -

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

然而,稍后3行的第二个console.log显示为:

Array[ ] 

如果我点击它显示的阵列链接:

数组[0]

有趣的是数据在那里,它只是没有像第一个数组那样显示出来(我可以点击数组链接,我确实看到了数组[0]下列出的对象控制台,我可以将它们旋转打开以查看数据。

这是一个范围问题,还是与Angular的异步性质相关的其他东西没有正确格式化我的第二个(真实)数组?

它让我变得笨拙,因为我需要像第一个数组一样正确地格式化我的第二个数组,以便稍后在函数中进行处理。

谢谢!

1 个答案:

答案 0 :(得分:1)

这是因为您的第二个console.log超出了then声明的范围。当您的第二个console.log运行时,数据可能尚未返回。

事实上,我会谨慎地说,您的第二个console.log(search.results)可能会在您的第一个console.log(search.results)之前进入您的控制台。