AngularJS不显示API数据 [英] AngularJS not displaying API data

查看:66
本文介绍了AngularJS不显示API数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是AngularJS的新手.我正在尝试检索名字,姓氏和& ;;使用状态代码的搜索功能,例如使用"DC"表示来自API的状态.

I am new to AngularJS. I am trying to retrieve firstname, lastname & State from an API, using a search functionality for a statecode, say, "DC" for ex.

我已修改为更简单,但在页面上仍看不到结果:

I have modified to be simpler, and I still see no result on the page:

这是我的收获:

    function ItemsController($scope, $http){
    $http.get("https://my.ncarb.org/Public/api/certification/search?statecode=dc")
    .success(function(data, status, headers, config){
      $scope.items = data;
  });
}

这是我的api的示例:

Here's a sample of my api:

{
  "data": [
    {
      "id": "14e1047c-b811-40f7-8a21-780ae5edf1ed",
      "firstName": "Kent",
      "lastName": "Abraham",
      "city": "WASHINGTON",
      "stateCode": "DC",
      "countryCode": "USA"
    },]
}

这是我的HTML:

  <body ng-controller="ItemsController">
    <h1>jSON Data</h1>
    <table>
      <tr ng-repeat="item in items">
        <td>{{item.id}}</td>
        <td>{{item.firstName}}</td>
        <td>{{item.stateCode}}</td>
      </tr>  
    </table>
  </body>

但是我的输出在检查后得到200 OK状态,但是页面上什么都没有显示...任何原因吗?

But my output, upon inspecting, getting a 200 OK status, but nothing gets displayed on the page...Any reason why ?

已附-开发工具中响应的屏幕截图

Attached - Screenshot of response in Dev tools

推荐答案

您做错了. $ http.get 返回承诺.

这是工作示例.

HTML:

<div ng-app="app">
    <div ng-controller="ItemsController">
        <h1>jSON Data</h1>
        <table>
            <tr ng-repeat="item in items">
                <td>{{item.id}}</td>
                <td>{{item.firstName}}</td>
                <td>{{item.stateCode}}</td>
            </tr>
        </table>
    </div>
</div>

Angular App&控制器:

Angular App & Controller:

var module = angular.module('app', []);
angular.module('app').controller('ItemsController', ['$scope', '$http', function ($scope, $http) {
    $http.get('https://my.ncarb.org/Public/api/certification/search?statecode=dc').then(function (response) {
         // this callback will be called asynchronously
         // when the response is available
        $scope.items = response.data.data;
    }, function (response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
    });
}]);

输出:

这篇关于AngularJS不显示API数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆