How to handle Async http call in AngularJS

Question

I am new to Angularjs. I am creating some employee app which basically fetch the data from http call(json) and display it using angularjs. The problem is before getting the response from http call my view got executed, so nothing displayed in my output page. I know there should be some logic to handle the async call but i am not aware of that, so could someone please help me?

Home.html

<html ng-app="employeeApp">
<head>
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<meta charset="utf-8">
<title>Employee Example</title>
<script
    src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
    var employeeApp = angular.module('employeeApp', []);
    employeeApp.controller('EmployeeCtrl', ['$http','$scope',
            function(http, scope) {
                http.get('http://localhost:9999/employee/7').success(
                        function(data) {
                            scope.employees = data;
                        });
            } ]);
</script>
</head>
<body ng-controller="EmployeeCtrl">
    <table class="table table-striped">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
            <th>LOCATION</th>
        </tr>
        <tr ng-repeat="employee in employees">
            <td>{{employee.id}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.age}}</td>
            <td>{{employee.location}}</td>
        </tr>
    </table>
    <hr>
    <hr>
</body>
</html>

Actual output:

enter image description here

My Expected output: enter image description here

Note:
If i load from json file or run from web browser i got the expected output but its not working in Angular script.

http://localhost:9999/employee/7
{"id":7,"age":65,"name":"test","location":"singapore"}

are you sure there are no CORS issues in your browser? That happens if the api server is on a different host or port than your application server — Vlad Gurovich
– Vlad Gurovich, Commented Mar 18, 2015 at 0:34
also chain a .catch(function(error){console.log('error', error);}) to your http promise to make sure to catch any errors — Vlad Gurovich
– Vlad Gurovich, Commented Mar 18, 2015 at 0:36

kodebot · Accepted Answer · 2015-03-18 00:48:29Z

4

You don't see any data because 'employees' is not array (i.e. your endpoint returns just one object).

Either return array of object(s) from your endpoint or if you always get only one object then remove ng-repeat and replace 'employee' with 'employees' in your binding.

Note: When you use object in ng-repeat then it will iterate properties in the object.

edited Mar 18, 2015 at 0:48

answered Mar 18, 2015 at 0:42

kodebot

1,7881 gold badge22 silver badges31 bronze badges

Add a comment |

pcnate · Accepted Answer · 2015-03-18 04:03:52Z

3

You are expecting ng-repeat to get a "list" of objects. What you are getting instead is a single object which ng-repeat is likely iterating though. Each property however does not have the expected properties of id, name etc.

What you should be returning instead in your ajax response should more like this:

[
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"}
]

Or, for a single item it would be:

[
  {"id":7,"age":65,"name":"test","location":"singapore"}
]

answered Mar 18, 2015 at 4:03

pcnate

1,7941 gold badge20 silver badges39 bronze badges

Thanks for your help. Both Mani and you answered correctly but first he responded to this question so i am accepting his answer and upvote for you.

Sivasakthi Jayaraman
– Sivasakthi Jayaraman

03/18/2015 09:10:16
Commented Mar 18, 2015 at 9:10

Add a comment |

Hieu TB · Accepted Answer · 2015-03-18 07:25:47Z

1

You can use Chrome Developer Tool (press F12 on Chrome) to debug the script. Watch "Network" tab for response data from server.

One other way I usually use to check bug like this is to print directly the varaiable to the template like this:

<body ng-controller="EmployeeCtrl">
{{employees}}
</body>

Sometime this helps me find out what happned to my data. Just remember to clear that after you solve the problem :)

answered Mar 18, 2015 at 7:25

Hieu TB

1625 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to handle Async http call in AngularJS

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related