$http.get method in angularjs for rest Api

Question

I want to fetch the list of friends for the REST-API into table using $http.get method in angularjs. Please see the DEMO. I am not able to load the JSON data, When I click on button.

JSON.data

{
    "friends": [
        {
            "FirstName": "John",
            "LastName": "Doe"
        },
        {
            "FirstName": "Ann",
            "LastName": "Wellington"
        },
        {
            "FirstName": "Sabrina",
            "LastName": "Burke"
        }
    ]
}

Index.html

   <body ng-app="step4App">
        <div ng-controller="FriendsCtrl">
             <button ng-click="loadFriends()">Load Friends</button>
             <table>
                  <thead>
                     <tr><th>First</th><th>Last</th></tr>
                  </thead>
                  <tbody>
                     <tr ng-repeat="friend in friends">
                          <td>{{friend.FirstName}}</td>
                          <td>{{friend.LastName}}</td>
                     </tr>
                  </tbody>
             </table>

        </div>
        <script>
             var app=angular.module("step4App",[]);
             app.controller("FriendsCtrl", function($scope, $http){
                 $scope.loadFriends=function(){
                     $http.get("friendsList.json").success(function(data){
                          $scope.friends=data;
                     }).error(function(){
                          alert("An unexpected error occured!");
                     });
                 }
             });
        </script>
   </body>

Are you serving this from Apache? Or the local file system? If you're using Chrome, the local file system probably won't work for you. — Jeff Watkins
– Jeff Watkins, Commented Jul 7, 2015 at 10:47

Niezborala · Accepted Answer · 2015-07-07 10:51:11Z

2

Your JSON file have an object, and $scope.friends is an array.

You need change this:

$scope.friends=data;

to:

$scope.friends = data.friends;

DEMO

answered Jul 7, 2015 at 10:51

Niezborala

1,8571 gold badge19 silver badges27 bronze badges

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

2 Comments

geeks Over a year ago

Thanks for reply. Its working, I always confused when this type situation arrive, could you explain more on this .......

Niezborala Over a year ago

What do you mean by "more"?

Collectives™ on Stack Overflow

$http.get method in angularjs for rest Api

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related