您的数据结构是什么

Question

我正在使用$http从我的控制器内的服务器获取数据，但它并没有按照我的意愿运行。

在我看来我正在使用需要从api中提取的数据$scope.data，但当我这样做时：

$http({method: 'GET',url: url}).then(function successCallback(response) {
  $scope.data = response.xx.yy.map(function(item) {
    return item.zz;
  });
}, function errorCallback(response) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

就像$scope.data在我看来甚至不存在。控制台记录响应有效，但我不能再进一步了。

我试过：

在我的控制器之外创建一个全局var并在我的回调中使用它但是这不起作用，可能是因为它是异步的我在回调之外被调用时未定义
使用$scope.$parent
在我的回调data = reponse中创建全局变量，也不起作用。

我开始相信它与它是异步的事实有关，或者可能是关于角度的其他事情，但不能真正弄清楚是什么/为什么。

编辑：

angular.module('MyApp').controller('PaCtrl', ['$scope', '$meteor','$timeout','$stateParams','$http',function ($scope, $meteor, $timeout,$stateParams,$http) {
  var url = '/api/'+$stateParams.ID.toString()
  $http({method: 'GET',url: url}).then(function successCallback(response) {
    console.log(response)//work
    $scope.friends = response.data.users[0].friends.map(function(item) {
      return item.name;
    });
    $scope.age = response.data.users[0].friends.map(function(item) {
      return item.age;
    });
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
  console.log($scope.friends) // undefined
  console.log($scope.age) // undefined
}]);

html：

<div ng-controller="PaCtrl">
      <div class="col-lg-12">
        <canvas    height="80"
        id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
        chart-legend="false" chart-series="series" chart-click="onClick"></canvas> 
      </div>
</div>

路线：

angular.module('MyApp').config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('users', {
            url: '/users/:userID',
            templateUrl: '/template.html'
        })
    });

Answer 1

试试这个：

$scope.data = {};

$http({method: 'GET',url: url}).then(function successCallback(response) {
  $scope.data = response;
}, function errorCallback(response) {
  console.log('Error', response);
});

HTML：

<div>{{data}}</div>

如果有效，请添加其余代码。

Answer 2

您的数据结构是什么

您可能正在从api获取阵列。这就是为什么它出现在日志上但不在你的视图中。

尝试在回调中设置范围为0的索引，如

Var data = response.xx. //etc.
$scope.data = data[0];

之前发生过同样的事情，希望这会有所帮助。

关于应用结构的说明

还有一件事，你应该在工厂里进行你的http调用，然后在你的控制器中调用它。保持良好的关注分离，使代码更具可读性。

使用$ scope

2 个答案:

您的数据结构是什么

关于应用结构的说明