AngularJS - 显示API中的数据

时间:2017-06-10 18:03:16

标签: javascript angularjs json api loops

我对AngularJS很新,并且在显示来自api调用的数据时遇到问题。

我想要显示标题但我在某个时候陷入困境。有人可以帮我循环吗?

这是我的index.html

controller.js

var app = angular.module('myApp', []);
app.controller('appController', function($scope) {
    //console.log("test");
        var url = "https://api.nytimes.com/svc/topstories/v2/home.json";
        url += '?' + $.param({
          'api-key': "853fc084776f46e29732e71b3f1269ae"
        });
        $.ajax({
          url: url,
          method: 'GET',
        }).done(function(result) {
          console.log(result);
          $scope.results = result;
        }).fail(function(err) {
          throw err;
        });
});

这是我的json

2 个答案:

答案 0 :(得分:0)

您提供的JSON是一个对象数组,而这些对象又具有一个带标题的对象数组 因此,您需要一个嵌套数组,如下所示,以显示JSON响应中的所有标题。

<div ng-repeat="result in results">
  <div ng-repeat="child in result.results">
    {{child.title}}
  </div>
</div>

答案 1 :(得分:0)

你遇到的两个问题首先是在角度有jquery ajax的情况下使用jquery ajax,因此结果变量将无法在控制台中的html上显示,但是你可以&# 39; t访问html所以我们必须写如下。

$scope.$apply(function(){
        $scope.results = result.results;
});

现在循环查看下面的代码

<div ng-app="myApp" ng-controller="appController">
  <ul>
   <li ng-repeat="x in results">
     {{x.title}}
   <li>
  </ul>
</div>

工作codepen link