2015-08-26 4 views
0

Я новичок в AngularJS. Я пытаюсь получить имя, фамилию & Состояние из API, используя функцию поиска для кода состояния, например, «DC» для ex.AngularJS не отображает данные API

Я модифицировал быть проще, и я до сих пор не вижу никаких результатов на странице:

Вот мой прибудете:

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; 
    }); 
} 

Вот пример моего апи:

{ 
    "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, но ничего не отображается на странице ... Любая причина?

Attached - Скриншот ответа в инструменты Dev

screen shot or response

+1

, что делает эту строку '$ http.get ($ scope.state.statecode) .then (onStates);' означает ? он собирается сделать правильный вызов ajax? –

+0

В методе get() я пытаюсь получить все коды состояния – Ron

+0

, но действительно ли код состояния содержит URL-адрес? Вы подтвердили правильность данных, которые вы получаете в 'onstates'? – doldt

ответ

2

Вы делаете это неправильно. $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> 

Угловое приложение & Контроллер:

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. 
    }); 
}]); 

Выход:

enter image description here

+0

Спасибо @Bhushan Firake, я скопировал ваш javascript/контроллер и работает как шарм. Итак, для $ http.get(), я должен всегда добавлять его с помощью .then()? – Ron

+1

@Ron Счастливые помочь. относительно '.then()', я рекомендую вам читать https://docs.angularjs.org/api/ng/service/$q –

+0

большое спасибо, прочитает документ. – Ron

0

Почему вы делаете второй $ http.get()? Если первый возвращает образец api, это бесполезно, потому что вы должны передать что-то, возвращающее ответ в параметре вашего $ http.get()

Возможно, вам стоит сделать $ scope.states = response.data сразу после вызов вашего API.

+0

Нет, все тот же – Ron

1

данные полный ответ от API.

Вобще:

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

Это решит вашу проблему :)

+0

Спасибо @Mahaveer Jain, попробуй – Ron

+0

@Ron рад помочь вам. вы можете попробовать. then также :) –

Смежные вопросы