带有 Json 和 $http ajax 的 Angular ng-repeat 显示一个空列表答案

【问题标题】：Angular ng-repeat with Json and $http ajax displays an empty list带有 Json 和 $http ajax 的 Angular ng-repeat 显示一个空列表
【发布时间】：2016-05-26 11:12:46
【问题描述】：

我正在尝试通过 name 和 id 显示元素列表，其中 ng-repeat 来自带有超级简单 ajax 请求的 json。

    var form = $("#loadAllServiceEngineForm");
    var url = form.attr("action");

    var App = angular.module('AdamApp', []);

    App.controller('locContol', function($scope, $http) {
        // Simple GET request
        $http.get(url).
          success(function(data) {
              $scope.locations = angular.fromJson(data);
              console.log(data);
          }).
          error(function(data) {
              console.error("NON CARICA I DATI");
        });
     });

在这个列表中

    <body ng-app="AdamApp">
     <div ng-controller="locContol">
        <ul>
            <li ng-repeat="location in locations |  orderBy: 'id'">
                <div>{{location.name}}-{{location.id}}</div>
            </li>
        </ul>
     </div>
   </body>

奇怪的是它返回一个空列表<li>，在控制台中我看到附加的奇怪数组。

这是 console.log 中的完整 json。

我不知道角度，我只是第一次尝试......但我看到了jQuery 之间的区别，即。当我用$.ajax 调用相同的json 然后用JSON.parse(data[i]); 解析时，它会在控制台中显示一个对象的纵坐标列表，而不是这个奇怪的对象数组。

我怎样才能在角度上获得相同的结果？

【问题讨论】：

从 jquery 到 angular 时，不要像 jquery 那样思考！我也犯了同样的错误，它对事情有完全不同的看法。使用.then 方法，同时会给你可用的响应数据，你不需要做任何json解析。
尝试从 JSON.parse 替换 angular.json ..
不要写$scope.locations = angular.fromJson(data);。然后检查你的控制台
我在console 中添加了另一张带有完整json 的图片。

标签： angularjs json ajax angularjs-ng-repeat

【解决方案1】：

尝试使用.then 而不是.success 来处理回调。也可以使用response.data 来获取解析后的 JSON 响应

$http.get(url)
     .then(function(response) {
          $scope.locations = response.data;
          console.log(response.data);
      })
      .catch(function(data) {
          console.error("NON CARICA I DATI");
      });

为了处理错误，您可以将错误回调作为第二个参数传递给.then 或作为.catch 参数的一部分。首选方法是使用.catch，因为它也会处理来自成功回调的错误（如果有）。

更新的 HTML

<li ng-repeat="location in locations track by $index |  orderBy: 'id'">
  <div>{{location.name}}-{{location.id}}</div>
</li>

【讨论】：

感谢您的回复。我得到的错误是：ReferenceError: data is not defined
当然data 没有定义。除非我们知道response 对象中有一个键data，否则不能简单地写response.data
我尝试使用console.log(response) 来查看完整的 json。我添加了另一个图像。我将data 视为Array，其中包含其他两个数组...我错了吗？
对不起。这是复制粘贴的错字。它应该是 response.data 而不是 data。现在代码应该记录并正常工作
是的，response.data 会得到我在第一张图片中发布的 Array，而 UI 是一个空列表 <li>，里面什么都没有