AngularJS not displaying API data

Question

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:

Here's my get:

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

Here's a sample of my api:

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

and here's my 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>

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

what does this line $http.get($scope.state.statecode) .then(onStates); meant? is it going to do correct ajax call? — Pankaj Parkar
– Pankaj Parkar, Commented Aug 26, 2015 at 18:32
but does the statecode actually contain an URL? Did you verify that the data you're getting in onstates is correct? — doldt
– doldt, Commented Aug 26, 2015 at 18:49
statecode does not contail URL. How do i verify the data i am getting in onState ? — Ron
– Ron, Commented Aug 26, 2015 at 19:00

Bhushan Firake · Accepted Answer · 2015-08-27 16:39:54Z

2

You are doing it wrong. $http.get returns a promise.

Here is the working sample.

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

Output:

answered Aug 27, 2015 at 16:39

Bhushan Firake

9,4825 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ron Over a year ago

Thanks @Bhushan Firake, i copied your javascript/controller and it works like a charm. So, for $http.get(), i should always append it with .then() ?

Bhushan Firake Over a year ago

@Ron Happy to help. regarding .then(), I recomment you reading docs.angularjs.org/api/ng/service/$q

Mahaveer Jain · Accepted Answer · 2015-08-27 16:42:40Z

1

data is complete response from the api.

Just do :

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

It will solve your problem :)

answered Aug 27, 2015 at 16:42

Mahaveer Jain

299 bronze badges

2 Comments

Ron Over a year ago

Thanks @Mahaveer Jain, will give it a try

Mahaveer Jain Over a year ago

@Ron glad to help you . you can try .then as well :)

tvirgil · Accepted Answer · 2015-08-26 19:04:45Z

0

Why do you do a second $http.get() ? If the first one return the sample of the api it is useless because you should pass something that return a response in parameter of your $http.get()

Maybe you should make$scope.states = response.data just after the call of your API.

answered Aug 26, 2015 at 19:04

tvirgil

813 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS not displaying API data

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related