CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc-4
Ron
Ron

Reputation: 1931

AngularJS not displaying API data

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

screen shot or response

Upvotes: 0

Views: 1620

Answers (3)

Mahaveer Jain
Mahaveer Jain

Reputation: 29

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 :)

Upvotes: 1

Bhushan Firake
Bhushan Firake

Reputation: 9458

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:

enter image description here

Upvotes: 2

tvirgil
tvirgil

Reputation: 81

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.

Upvotes: 0

Related Questions