如何从json获取数据以在AngularJS中查看

Question

我有一个Angular控制器，它通过服务从2个不同的json文件获取数据，我需要将该数据传递给视图。

控制器文件：

.controller('MainController', ['info', function (info){
    var vm = this;

    info.getAddresses().then(function(data) {
      vm.addresses = data.addresses;
    });

    info.getNames().then(function(data) {
      vm.names = data.names;
    });
    console.log(this);
}])

getAddresses和getNames函数只是$ .get（'json-url'）。

如果我在右括号之前在控制器中使用console.log（this），则可以在控制台中看到以下数据：

但我无法从视图访问该2个属性。我想念什么吗？

Answer 1

使用范围变量而不是var存储数据

.controller('MainController', ['info', '$scope', $scope, function (info){
$scope.vm = this;

info.getAddresses().then(function(data) {
  $scope.vm.addresses = data.addresses;
});

info.getNames().then(function(data) {
  $scope.vm.names = data.names;
});
console.log(this);

}]）

并在您的视图中调用此范围变量，例如

<tr ng-repeat = item in vm>
   <td>you can get your data here</td>
</tr>

希望这行得通

Answer 2

您正在将数据分配给变量而不是$scope。

您的控制器应该是这样的

.controller('MainController', ['info', '$scope', function (info, $scope){    

    info.getAddresses().then(function(data) {
      $scope.addresses = data.addresses;
    });

    info.getNames().then(function(data) {
      $scope.names = data.names;
    });

    console.log($scope);

}])

Answer 3

您在这里使用了controller as语法。因此，您需要在ng-controller中使用它。检查以下代码。

    <div ng-controller="MainController as vm">
       <div ng-repeat="vm.addresses in address">{{ address }}</div>
       <div ng-repeat="vm.names in name">{{ name}}</div>
</div>

如果地址或名称是json对象，则需要在地址或名称对象中使用特定的键。

Answer 4

这可能是摘要循环问题。添加$scope.$apply将解决此问题。 jQuery中的$.get()会更改vm.names的值，但这不是Angular摘要周期的一部分。

这是一个可行的示例，希望对您有帮助

angular.module('myApp', [])
  .factory('info', function() {
    var mock = function() {
      return new Promise(function(resolve, reject) {
        resolve({
          "names": ['Alice', 'Bob']
        });
      });
    };

    return {
      getNames: mock
    };
  })
  .controller('MainController', function(info,$scope) {
    var vm = this;
    info.getNames().then(function(data) {
      vm.names = data.names;
      // trigger $apply manually
      $scope.$apply();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MainController as vm">
    {{vm.names}}
  </div>
</div>

Answer 5

对于Angular 2 + 将json响应保存在某个变量中：

public data:any=your json response;

然后在视图中，使用* ngFor指令将其显示为vi：

<p *ngFor="let d of data">{{d}}</p>