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

【问题标题】：How to get data from json to view in AngularJS如何从 json 获取数据以在 AngularJS 中查看
【发布时间】：2018-07-10 06:52:52
【问题描述】：

我有一个 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)，我可以在控制台中看到以下数据：

但我无法从视图中访问这两个属性。我错过了什么吗？

【问题讨论】：

你能添加一些代码吗？
请贴出你的控制器代码
我用控制器的代码更新了描述
你能在视图中分享你的代码吗？类似<span>{{vm.addresses}}</span>
我尝试使用 {{vm}}、{{vm.addresses}} 的视图，通过 {{vm.addresses}} 进行 ng-repeat，但没有显示任何信息

标签： angularjs json

【解决方案1】：

这可能是一个摘要周期问题。添加$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>

【讨论】：

谢谢，$apply() 方法有效。我在原始控制器中使用它，在将数据传递给 $scope 后应用它。

【解决方案2】：

使用作用域变量而不是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>

希望这可行

【讨论】：

【解决方案3】：

您将数据分配给变量，而不是$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);

}])

【讨论】：

没有必要使用 $scope，因为 OP 使用控制器作为语法
嗯，他试图将数据传递给视图，这在将数据存储为回调函数的属性时是不可能的。 OP is using the controller as syntax他从没提过这个。

【解决方案4】：

这里你使用了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 对象，那么您需要在地址或名称对象中使用特定的键。

【讨论】：

【解决方案5】：

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

public data:any=your json response;

然后在视图中，使用 *ngFor 指令显示它：

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

【讨论】：

不幸的是，我需要 Angular 1 的解决方案。*
好的，我记得你可以使用 $scope 来保存 json 响应，并在视图中使用 ng-repeat 来迭代和显示。
{{d}}