Question

我是Angular的新手，下面是应该从http网址获取数据并显示的简单代码：

    <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

  <div ng-app="myApp" ng-controller="galaxyCtrlA"> 
    <p>The $http service requests responses from the the server on the "Zone of Avoidance" galaxies, and the response are set as the values of the "message" and "pictures" variables.</p>
    <p>Welcome message from the "Zone of Avoidance" galaxies is:</p>
       <h1>{{ message }}</h1>

    <p>The pictures from the "Zone of Avoidance" are:</p>
     <ul>
      <br/>
      <li ng-repeat="p in pictures">
        <img src="{{ p.image }}" alt="{{ p.image }}" width="60%" />
      </li>
    </ul>
  </div>

  <script>
  var app = angular.module('myApp', []);

  app.controller('galaxyCtrlA', function($scope, $http) {
    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/welcome.html")
    .then(function(response) {
        $scope.message = response.data;
    });

    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .success(function(response) {
       $scope.pictures = response.image;
    });
  });

  </script>

</body>
</html>

上面的输出应该非常简单，但我得到一个空白页面，没有任何错误。

请告知出了什么问题

Answer 1

该端点不返回具有.image属性的对象，而是返回每个具有该属性的对象数组。

[{image： “/AngularJS/files/httpRequest/Stills_Cam-4_Frame-1300_adjusted.jpg”}， {image：“/ AngularJS / files / httpdRequest / 14-scientistsdi.jpg”}]

尝试将$scope对象分配给response.data对象属性。另请注意，.success已弃用，而有利于.then

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .then(function(response) {
       $scope.pictures = response.data;
    });

Answer 2

问题在于第二个请求。它应该是：

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json")
    .success(function(response) {
       $scope.pictures = response;
    });

Answer 3

我的测试中没有解析json。这有用吗？

$http.get("picture-list.json").success(function(response) {

    var data = JSON.parse(response);
    $scope.pictures = data.image;
});

这是一个我知道正在工作的json字符串：＆＃34; {\＆＃34;图像\＆＃34;：[{\＆＃34;图像\＆＃34;：\＆＃34; url.jpg \＆＃34;}]}＆＃34 ;

AngularJS - 根本没有触发/获取Http请求

3 个答案: