Question

我正在尝试在DOM上显示JSON数据（只有49个项目），但是我却得到了{"readyState":1}。我主要是为了测试我的代码是否正常工作。

我知道代码中的问题在哪里，我只是不知道语法应该是什么。

所以我的问题是，如何定义$scope.dogs才能使JSON数据显示在页面上？我在{{dogs}}控制器的HTML中有'mainCtrl'。

这是JS文件：

const app = angular.module('dogBreedApp', []);

  app.controller('mainCtrl', function($scope) {
    $scope.dogs = $.ajax(settings).done(function (response) {
    });
  });

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://dogdatabase-d31f.restdb.io/rest/dogs",
    "method": "GET",
    "headers": {
      "content-type": "application/json",
      "x-apikey": "xxxxxxxxxxxxxxxxxxxxxx",
      "cache-control": "no-cache"
    }
  }
$.ajax(settings).done(function (response) {
  console.log(response);
});

从我从中提取JSON的restdb.io服务复制并粘贴了settings变量和ajax内容，它记录了JSON的正确记录。

我是开发的初学者，所以我确定它可能非常简单。

谢谢！

Answer 1

如果您要使用AngularJS，我建议使用Angular的AJAX方法而不是jQuery。这是您可以做到的一种方法。如果将$http调用放入服务中，则可以返回诺言并在控制器中处理诺言解析。当像我在这里使用controllerAs语法时，您需要将this放在局部变量中，因为在诺言解决方案this中将引用诺言而不是控制器（如果有此道理）。对于HTML中的输出，我正在使用json过滤器，以便显示缩进和换行符，而不仅仅是一个长字符串。

angular.module('app', [])
  .service('dogsService', function($http) {
    var service = {};
    service.getDogs = function() {
      return $http.get('https://dogdatabase-d31f.restdb.io/rest/dogs', {headers: {
        'x-apikey': 'xxxxxxxxxxxxxxxxxxxxxx'
        }
      }).then(response => response.data);
    };
    return service;
  })
  .controller('ctrl', function(dogsService) {
    var _this = this;
    this.dogs = [];
    dogsService.getDogs().then((data) => {
      _this.dogs = data;
    }).catch((error) => {
      console.error(error);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as $ctrl">
  <pre>{{$ctrl.dogs | json}}</pre>
</div>

为什么我在DOM而不是AngularJS中的JSON数据上获得{“ readyState”：1}？

1 个答案: