Javascript 使用Angular JS搜索NYT API_Javascript_Angularjs_Api

Javascript 使用Angular JS搜索NYT API

javascript angularjs api

Javascript 使用Angular JS搜索NYT API,javascript,angularjs,api,Javascript,Angularjs,Api,我正在用Angular JS编写代码，实现一个标准应用程序，在屏幕上显示一个搜索字段和一个搜索按钮，当搜索运行时，它应该拉入远程结果并在屏幕上显示它们控制台没有向我显示任何错误，但我无法在屏幕上显示结果。我想知道如何在屏幕上显示结果下面是我的js文件中的代码 angular.module('plunker', []) .controller('MainCtrl', ['$scope', '$http', function($scope, $http) { var cle

我正在用Angular JS编写代码，实现一个标准应用程序，在屏幕上显示一个搜索字段和一个搜索按钮，当搜索运行时，它应该拉入远程结果并在屏幕上显示它们控制台没有向我显示任何错误，但我无法在屏幕上显示结果。我想知道如何在屏幕上显示结果

下面是我的js文件中的代码

angular.module('plunker', [])
.controller('MainCtrl', ['$scope', '$http',
    function($scope, $http) {

      var clearError = function(result) {
        $scope.error = "";
        return result;
      };

      var applyData = function(result) {
        $scope.articles = result.data;
        console.log(result.data);
      };

      var rejected = function(error) {
        $scope.error = error.message;
      };

      var getArticles = function() {
        var url = "http://api.nytimes.com/svc/search/v2/articlesearch.json?q=North+Korea&api-key=052861d142cf4eb7fa12bb79781fdbe1:11:69591426";
        var promise = $http({
          method: 'GET',
          // https://jsonp.nodejitsu.com
          url: "https://jsonp.nodejitsu.com/?url=" + encodeURIComponent(url)
        });

        promise.success(clearError).then(applyData);
        promise.error(function(error) {
          $scope.error = error.message;
        });
      };
      getArticles();

      $scope.getRepos = _.debounce(getArticles, 300);

    }]);

这是html代码

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input ng-keyup="getArticles()" />
  <table>
    <thead>
      <tr>
        <td>Headline</td>
        <td>Body</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-bind="error" style="color:red;"></tr>
      <tr ng-repeat="a in Articles">
        <td>{{a.headline}}</td>
        <td>{{a.body}}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>


安古拉斯普朗克
文件。写（“”）；
大字标题
身体
{{a.headline}}
{{a.body}}

您有几个问题

在范围中有

文章

，但在html中是

文章

要访问响应所需的实际数据，需要深入查看返回的数据对象：

尝试更改：

var applyData = function(result) {
    $scope.articles = result.data;
    console.log(result.data);
  };

致：

然后在html中，您需要稍微不同的属性，因为

headline

具有子属性，如

main

和

print\u headline

举例来说

  <tr ng-repeat="a in articles">
    <td>{{a.headline.main}}</td>
    <td>{{a.lead_paragraph}}</td>
  </tr>


{{a.headline.main}
{{a.lead_段落}

浏览器控制台网络选项卡中的请求状态是什么？你得到结果了吗？在“网络”选项卡上，它显示52个请求（448KB已传输）7.16S，需要查看你的特定api请求并查看返回的内容。所有文件都可以在我位于nytapiThanks的Plunk上找到。当我实现你建议的代码并将所有文章中的A都设置为相同的情况时，它开始给出查询条件的结果在URL链接中使用，但我仍在研究如何使用搜索按钮搜索任何术语。将需要删除硬代码North Korea内容并替换为动态术语

  <tr ng-repeat="a in articles">
    <td>{{a.headline.main}}</td>
    <td>{{a.lead_paragraph}}</td>
  </tr>